要在Angular 2+中扩展自定义元素,您可以使用Angular的createCustomElement
函数来包装您的组件,并将其注册为自定义元素。以下是一个解决方法的代码示例:
npm install @angular/elements
import { Component, Input, OnInit, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
@Component({
selector: 'my-custom-element',
template: 'Hello, {{name}}!
'
})
export class MyCustomElementComponent implements OnInit {
@Input() name: string;
constructor(private injector: Injector) {}
ngOnInit() {
// 将组件包装为自定义元素
const customElement = createCustomElement(MyCustomElementComponent, { injector: this.injector });
// 在浏览器中注册自定义元素
customElements.define('my-custom-element', customElement);
}
}
import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyCustomElementComponent } from './my-custom-element.component';
import { createCustomElement } from '@angular/elements';
@NgModule({
imports: [BrowserModule],
declarations: [MyCustomElementComponent],
entryComponents: [MyCustomElementComponent]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const customElement = createCustomElement(MyCustomElementComponent, { injector: this.injector });
customElements.define('my-custom-element', customElement);
}
}
// 导出该模块
export { AppModule };
index.html
文件中使用自定义元素:
这样,您就可以在Angular 2+中扩展自定义元素了。确保使用ng build --prod
命令构建您的应用程序,以便优化代码并排除不必要的依赖项。