在 Angular2 中引导多个组件答案

【问题标题】：Bootstrapping multiple components in Angular2在 Angular2 中引导多个组件
【发布时间】：2017-01-16 16:57:51
【问题描述】：

我的问题与这个问题是一致的： 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: [AppComponent,HeaderComponent,FooterComponent]

在我的 main.ts 中，我引导它们

platformBrowserDynamic().bootstrapModule(AppModule);

该应用程序可以与包含的所有三个模块一起正常工作。当其中任何一个被删除时，应用程序可以工作，但我在控制台中收到一些错误[img attach]。

我正在尝试在同一组件中创建可以插入和退出应用程序的独立模块。例如，页眉、页脚和正文模块。有些页面可能不需要 header，所以我可以跳过 app-header 包含。

我的方法对吗？

【问题讨论】：

为什么不为您说要使用的每个组件创建@NgModule 模块，如果您需要所有组件或只包含需要的组件，请将它们全部包含在内。原因是，Angular2 本身就鼓励模块化方法，这也是 > RC0.5 版本大量过渡的主要原因。
github.com/angular/zone.js/issues/427
你找到答案了吗？

标签： javascript angular typescript

【解决方案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);
            }
        });
    }
}

【讨论】：

【解决方案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

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

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

例如）

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

如果您在启动时将所有引导组件都放在适当的位置，例如，

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

这应该可行。

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

希望对你有帮助。

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

【讨论】：

那么，如果在您的代码中，您的 html 中没有包含 app1 和 app2 怎么办。它仍然可以正常工作吗？
不，我认为它不会起作用。由于它是自举的，因此它希望事物出现在 html 中
我的意思是，它可以正常工作，但您仍然会看到错误。

【解决方案3】：

马诺，

我可能会一次性引导应用程序：

<app>Loading...</app>

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

【讨论】：

这是个好主意，但我没有使用这种方法的原因是我打算创建的独立组件将根据需要由不同的团队使用。因此，如果团队不希望在他们的代码中使用标头，他们只需在他们的 html 中省略 app-header 包含。这里需要注意的重要一点是，在其 html 中使用这些组件的团队将无法访问开发代码。
Angular 2 作为 SPA 应该作为一个单独的单元来服务——这些组件不能在 Angular 上下文之外使用。因此，如果这些团队正在运行一个 ng2 应用程序，那么可以将一个离散组件直接包含在他们的应用程序中。