Angular 将本机web组件（非角度组件）加载到角度web组件中

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

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

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

导出类HelloComponent扩展HtmleElement{
构造函数（）{
超级（）；
}
connectedCallback（）{
this.innerHtml=`Native component loaded successfully`；
//初始化和加载组件。
}
}

我的角度代码如下：

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

如何将此HelloComponent注入此类

---

html customElements不起作用。

只要本地组件定义正确，它就应该加载到任何地方。不要忘记调用

customElements.define（'hello-comp'，HelloComponent）定义类后
HelloComponent

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

另外，请确保您正在支持本机组件的浏览器上运行，或者确保加载polyfill。
是的，它可以工作。使用自定义元素模式，angular允许使用它。我还尝试了角度组件和hello组件之间的双向通信。它使用自定义事件&getter和setter方法工作。如果@Intervalia回答了您的问题，请接受他的回答。本网站基于社区对贡献的认可。