在 Angular Web 组件中加载本机 Web 组件（非 Angular 组件）答案

【问题标题】：load native web component (non angular component) inside angular web component在 Angular Web 组件中加载本机 Web 组件（非 Angular 组件）
【发布时间】：2019-06-16 15:34:14
【问题描述】：

我有一个名为 AppComponent 的 Angular 容器组件。我想在 AppComponent 中加载我的非角度组件 HelloComponent。

我的实际目标是将现有的旧组件加载到 Angular 6 组件中。

export class HelloComponent extends HTMLElement {
   constructor() {
      super();
   }
   connectedCallback() {
      this.innerHtml = `<h1>Native component loaded successfully</h1>`;
      //init and load component.
   }
}

我的角码如下：

<angular-app>
     <hello-comp></hello-com>
</angular-app>

如何将这个 HelloComponent 注入到这个类中。

html customElements 不起作用。

【问题讨论】：

如果@Intervalia 回答了您的问题，请接受他的回答。本网站基于社区对贡献的认可。

标签： angular web-component micro-frontend

【解决方案1】：

只要正确定义了原生组件，它就可以在任何地方加载。定义类HelloComponent后别忘了调用customElements.define('hello-comp', HelloComponent);

我假设您使用的是 es6 导入，因此您需要在 angular 文件中导入 HelloComponent 文件。

并且，请确保您在支持原生组件的浏览器上运行或确保加载 polyfill。

【讨论】：

是的，它奏效了。使用 CUSTOM_ELEMENT_SCHEMA，角度允许使用它。我还尝试了 Angular 组件和我的 hello-comp 之间的 2 路通信。它使用自定义事件和 getter 和 setter 方法工作。