我正在从 asp.net web 表单迁移到 Angular 4。我正在一步一步地进行。更换一个零件并将其投入生产。我在页面中多次加载相同的 Angular 应用程序时遇到问题。例如用代码
<root tag="table-ep-component" data="5800"></root>
<root tag="table-ep-component" data="3333"></root>
页面中只有一个已加载的应用程序 - 第一个。我怎样才能让它们同时工作？有任何建议欢迎提出
您可以使用Applicationref.bootstrap方法来做到这一点：
abstract bootstrap<C>(
componentFactory: ComponentFactory<C>|Type<C>,
rootSelectorOrNode?: string|any): ComponentRef<C>;
正如我们所看到的，这个方法可以采取rootSelectorOrNode参数，这样我们就可以引导同一个组件两次。
ngDoBootstrap根上的方法@NgModule可以帮助我们手动引导我们的应用程序：
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
entryComponents: [AppComponent]
})
export class MenuModule {
ngDoBootstrap(appRef: ApplicationRef) {
const rootElements = document.queryselectorAll('root');
// cast due to https://github.com/Microsoft/TypeScript/issues/4947
for (const element of rootElements as any as HTMLElement[]){
appRef.bootstrap(AppComponent, element);
}
}
}
也可以看看：
- Angular 2 独立组件
- 更改根模块之间的共享数据
- 获取引导组件
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
