Question

我的问题是这个问题： 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。

我的做法是对的吗？

Answer 1

我刚刚找到了this，它运行正常

import { NgModule, Injectable, APP_INITIALIZER, ApplicationRef, Type, ComponentFactoryResolver } from '@angular/core';
import {FooterComponent} from './footercomponent';
import {AppComponent} from './appcomponent';
import {HeaderComponent} from './headercomponent';

const components = [AppComponent, HeaderComponent,FooterComponent];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  entryComponents: components,
  providers: []
})
export class AppModule {
constructor(private resolver: ComponentFactoryResolver) { }
    ngDoBootstrap(appRef: ApplicationRef) {
        components.forEach((componentDef: Type<{}>) => {
            const factory = this.resolver.resolveComponentFactory(componentDef);
            if (document.querySelector(factory.selector)) {
                appRef.bootstrap(factory);
            }
        });
    }
}

Answer 2

模块方法：

@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

如果您想要所有主模块，请包括此主模块，或仅包含相关模块。

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

例如）

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

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

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

这可能应该有用。

更多信息：

How to dynamically create bootstrap modals as Angular2 components?

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

希望它有所帮助。

如果有更多修改，请告诉我。

Answer 3

真，

我可能会将应用程序整合在一起：

<app>Loading...</app>

然后为页眉和页脚创建组件，并将它们作为子视图包含在主组件中。

在Angular2中引导多个组件

3 个答案: