在Angular中,我们可以通过自定义元素来扩展HTML标签,以便在任何地方使用它们。有两种方式可以实现自定义元素:使用构造函数和使用ngDoBootstrap方法。
使用构造函数:
import { Component, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
@Component({
selector: 'custom-element',
template: 'Hello, Custom Element!
'
})
export class CustomElementComponent {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const customElement = createCustomElement(CustomElementComponent, { injector: this.injector });
if (!customElements.get('custom-element')) {
customElements.define('custom-element', customElement);
}
}
}
然后,在主模块中手动调用ngDoBootstrap方法:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CustomElementComponent } from './custom-element.component';
@NgModule({
imports: [BrowserModule],
declarations: [CustomElementComponent],
entryComponents: [CustomElementComponent]
})
export class AppModule {
ngDoBootstrap() {}
}
使用ngDoBootstrap方法:
import { Component, NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
@Component({
selector: 'custom-element',
template: 'Hello, Custom Element!
'
})
export class CustomElementComponent {}
@NgModule({
imports: [BrowserModule],
declarations: [CustomElementComponent],
entryComponents: [CustomElementComponent]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const customElement = createCustomElement(CustomElementComponent, { injector: this.injector });
if (!customElements.get('custom-element')) {
customElements.define('custom-element', customElement);
}
}
}
在这种方式中,我们将ngDoBootstrap方法定义在主模块中,并在其中创建和定义自定义元素。
无论选择哪种方式,最后都需要在Angular应用的主模块中调用ngDoBootstrap方法来启动应用。这样,我们就可以在其他非Angular应用中使用自定义元素了。