在 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。
我有一个名为 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。