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

【问题标题】：Is it possible to run one Angular 2 app several times in one page?是否可以在一页中多次运行一个 Angular 2 应用程序？
【发布时间】：2018-02-04 09:18:00
【问题描述】：

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

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

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

【问题讨论】：

为什么你需要多次使用同一个应用，而不是在一个应用中多次使用同一个组件？
到目前为止，主页标记是由 asp.net Web 表单生成的，我们还没有接近完全迁移到 Angular4。 Asp.net web forms告诉这个组件应该在这个地方。一些组件是 Angular4 应用程序。有时它应该是在不同位置的一个页面中的几个 Angular4 组件。还没有找到其他现实生活中逐步从 Web 表单迁移到 Angular 的方法，也无法一步到位 - 一步的工作量太大。
您可以在第一次需要时渲染应用程序并将所需的组件放入其中。当不需要这部分时，您隐藏标签并使用系统的其他部分。下次您需要角度形式时，您会显示根容器并将另一个形式放入其中。你怎么看？只是想法，我不知道该怎么做:)
有时我需要在不同的地方展示几个 Angular 组件。可以通过一些 DOM 操作来想象这个工作。就像将此组件加载到根目录中，然后将其移动到其他位置。看起来不像什么可靠的东西。仍然，感谢您的想法（：

标签： asp.net angular webforms angular-bootstrap

【解决方案1】：

您可以使用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);
     }
   }
}

另见：

【讨论】：

它看起来像我需要的。除了 ngDoBootstrap 不调用。将 console.log 放在哪里。我在使用 AoT 的生产模式下使用 Angular CLI 进行编译。调查为什么不调用。
你应该从 NgModule 元数据中删除引导属性
为什么这种方法共享所有应用程序的所有根服务？相同的服务实例。尽管它们是根，如何设置 Angular 以使用单独的服务？