angular - 在 Angular Web 组件中加载本机 Web 组件（非 Angular 组件）

Question

我有一个名为AppComponent的角度容器组件。我想在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 不起作用。

Answer 1

只要正确定义了本机组件，它就应该在任何地方加载。customElements.define('hello-comp', HelloComponent);定义类后不要忘记调用HelloComponent

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

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