是否可以在一个页面中多次运行一个Angular 2应用程序？

我从asp.net web表单到角4.进行迁移我正在一步一步来。更换一个零件并将其投入生产。我在页面中多次加载相同的Angular应用程序时遇到问题。例如，使用代码是否可以在一个页面中多次运行一个Angular 2应用程序？

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

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

来源

2017-08-26 IAfanasov

为什么你需要相同的应用程序多次，而不是一个应用程序内的同一部件多次？ – jonrsharpe

主要页面的标记是由asp.net web表单到目前为止已经产生，我们不接近完全迁移到Angular4。 Asp.net web表单告诉这个组件应该在这个地方。一些组件是Angular4应用程序。有时它应该是在不同地方的一个页面中的几个Angular4组件。有没有发现其他实际生活的做法，从Web形式角一步一步迁移，不能一步到位迁移 - 太多工作的一个步骤。 – IAfanasov

您可以根据第一个需求渲染一次应用程序，并将需要的组件放入其中。当这部分不需要时，您隐藏标签并与系统的其他部分一起工作。下一次你需要角度表单时，你显示根容器并将其他表单放入它。你怎么看？只是想法，我不知道该怎么做:) –

您可以使用Applicationref.bootstrap的方法做它的工作：

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

我们可以看到这种方法可以采取rootSelectorOrNode参数，所以我们可以引导同一个组件的两倍。在你的根@NgModule

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

@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); 
    } 
    } 
}

参见：

来源

2017-08-26 15:30:33 yurzui

它看起来像我需要的东西，除了ngDoBootstrap不叫。放置console.log其中。我在AoT生产模式下使用Angular CLI进行编译调查它为什么不叫它 – IAfanasov

您应该从NgModule元数据中移除引导属性 – yurzui

是否可以在一个页面中多次运行一个Angular 2应用程序？

回答

相关问题