javascript – 在Angular2中引导多个组件

@H_502_0@

我的问题是这个问题：
Error when bootstrapping multiple angular2 modules

我的index.html有以下代码

<app-header>Loading header...</app-header>
  <app-root>Loading...</app-root>
  <app-footer>Loading footer...</app-footer>

在我的app.module.ts中,我将这3个组件提供给bootstrap：

bootstrap: [AppComponent,HeaderComponent,FooterComponent]

在我的主页上,我引导他们

platformBrowserDynamic().bootstrapModule(AppModule);

该应用程序适用于所有三个模块.当其中任何一个被删除时,该应用程序可以工作但我在控制台[img attach]中收到的错误很少.

我试图在同一组件中创建可以插入和移出应用程序的独立模块.例如,页眉,页脚和正文模块.有些页面可能不需要标题,因此我可以跳过app-header include.

我的做法是对的吗？

解决方法

模块方法：

@NgModule({
  declarations: [App1],exports: [App1]
})
export class App1Module
  
@NgModule({
  declarations: [App2],exports: [App2]
})
export class App2Module
  
@NgModule({
 imports: [App1Module,App2Module],exports: [App1Module,App2Module]
})
export class MainModule

如果您想要所有主模块,请包含此主模块,或仅包含相关模块.

虽然您可以为每个组件创建单独的模块并在需要时使用它们,或者通过导入它们来一次性使用它们,但您仍然可以继续并通过在引导程序的数组索引中一次又一次地提及它们来引导多个组件.

例如.)

@NgModule({
  imports: [],declarations: [App1,App2,App3],bootstrap: [App1,App3]
})
export class BaseModule {}

如果您在开始时就已经拥有了所有自举组件,例如,

<body>
   <app1>App1</app1>
  <app2>App1</app2>
  <app3>App1</app3>
</body>

这可能应该有效.

https://plnkr.co/edit/akm7OPahe72Ex9i2ZXej?p=preview

希望能帮助到你.

如果有更多编辑,请告诉我.

javascript – 在Angular2中引导多个组件

解决方法

猜你在找的JavaScript相关文章