在 angular 网络组件中加载本机网络组件(非 angular 组件)

load native web component (non angular component) inside angular web component

我有一个名为 AppComponent 的 angular 容器组件。我想在 AppComponent.

中加载我的非 angular 组件 HelloComponent

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

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

我的angular代码如下:

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

如何将此 HelloComponent 注入此 class.

html 自定义元素不起作用。

只要正确定义本机组件,它就应该可以在任何地方加载。不要忘记在定义 class HelloComponent

之后调用 customElements.define('hello-comp', HelloComponent);

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

并且,请确保您 运行 使用支持本机组件的浏览器或确保加载 polyfill。