问题描述

我正在从 asp.net 网络表单迁移到 Angular 4.我正在逐步完成.更换一个零件并将其投入生产.我在页面中多次加载相同的 Angular 应用程序时遇到问题.例如代码

I'm making migration from asp.net web forms to Angular 4. I'm making it step by step. Replacing one part and placing it in production. I face a problem with loading same Angular app several times in page. For example with code

<root tag="table-ep-component" data="5800"></root>
<root tag="table-ep-component" data="3333"></root>

页面中只有一个加载的应用程序 - 第一个.我怎样才能让它们同时工作?欢迎任何建议

there is only one loaded app in the page - the first one. How can I make them work both? Any suggestions are welcome

推荐答案

您可以使用 Applicationref.bootstrap 方法来完成它的工作:

You can use Applicationref.bootstrap method to do it working:

abstract bootstrap<C>(
  componentFactory: ComponentFactory<C>|Type<C>,
  rootSelectorOrNode?: string|any): ComponentRef<C>;

正如我们所见，此方法可以采用 rootSelectorOrNode 参数，因此我们可以两次引导同一个组件.

As we can see this method can take rootSelectorOrNode parameter so we can bootstrap the same component twice.

ngDoBootstrap 方法 @NgModule 可以帮助我们手动引导我们的应用程序:

ngDoBootstrap method on your root @NgModule can help us to manually bootstrap our application:

@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 独立组件
• 更改根模块之间的共享数据
• 获取引导组件

这篇关于是否可以在一页中多次运行一个 Angular 2 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！