Question

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

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

<app1>
  Loading
  </app1>

索引页面还有另一个包含局部视图Contacts.cshtml的div。 Contacts.cshtml-＆GT;

<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应用程序。

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

1 个答案: