要解决"Angular elements,具有共享 Angular/Ivy 的多个组件"的问题,你可以按照以下步骤进行操作:
ng new angular-elements-demo
cd angular-elements-demo
ng generate component hello-world
import { Component } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: `
Hello World!
This is a shared Angular element.
`
})
export class HelloWorldComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@NgModule({
imports: [BrowserModule],
declarations: [HelloWorldComponent],
entryComponents: [HelloWorldComponent],
})
export class AppModule {
ngDoBootstrap() { }
}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { createCustomElement } from '@angular/elements';
import { AppModule } from './app/app.module';
import { HelloWorldComponent } from './app/hello-world/hello-world.component';
enableProdMode();
const element = createCustomElement(HelloWorldComponent, { injector: platformBrowserDynamic().injector });
customElements.define('hello-world', element);
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
ng build --prod --output-hashing none
Angular Elements Demo
ng serve
现在,你就可以在浏览器中看到 "Hello World!" 的文本,这就是一个使用 Angular Elements 创建的可重用的 Angular 组件。