在 Angular2 中独立且动态地加载组件

Question

我有 2 个组件 A 和 B。当我启动应用程序时，一个 div 在页面上滑动，组件 A 通过 div 上的部分视图加载。当我单击组件 A 模板中的按钮时，另一个 div 会滑出。我想在这个 div 上显示组件 B。我如何实现这一目标？ 我不能使用路由，因为路由意味着我必须将这两个组件都放在父组件下。我希望这两个组件彼此独立，但仍存在于同一页面的不同 div 中。

基本上我有一个从索引页面开始的 MVC 结构。索引页面有一个 div，其中包含部分视图 Home.cshtml 主页.cshtml->

<app1>
  Loading
  </app1>

此外，索引页面还有另一个 div，其中包含部分视图 Contacts.cshtml。 Contacts.cshtml->

<app2>
    Loading..
</app2>

两个 div 彼此相邻。如何在同一页面的不同 div 上同时加载两个组件。两个模板都只显示一些文本。

Answer 1

您可以使用其中一种方法

https://stackoverflow.com/a/41119253/217408

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ ComponentOne, ComponentTwo ],
  entryComponents: [ ComponentOne, ComponentTwo ]
})
export class AppModule { 
  ngDoBootstrap(appRef: ApplicationRef) {
    if(document.querySelector('component-one')) {
      appRef.bootstrap(ComponentOne);
    }
    if(document.querySelector('component-two')) {
      appRef.bootstrap(ComponentTwo);
    }
  }
}

https://stackoverflow.com/a/39687157/217408

platformBrowserDynamic([{ provide: SharedService, useValue: sharedService }]).bootstrapModule(AppModule)
platformBrowserDynamic([{ provide: SharedService, useValue: sharedService }]).bootstrapModule(AppModule2)

前者创建了一个单一的应用程序（共享区域），这使得使用共享服务进行通信变得更加容易。 后者在同一页面上创建单独的 Angular2 应用程序。