在 Angular2 中引导多个组件

Question

My question is inline with this question: Error when bootstrapping multiple angular2 modules我的问题与这个问题一致：引导多个 angular2 模块时出错

My index.html has the following code我的index.html有以下代码

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

In my app.module.ts , I supply those 3 components to bootstrap:在我的app.module.ts 中，我提供了这 3 个组件来引导：

 bootstrap: [AppComponent,HeaderComponent,FooterComponent]

and in my main.ts, I bootstrap them在我的 main.ts 中，我引导它们

 platformBrowserDynamic().bootstrapModule(AppModule);

The application works fine with all the three modules included.该应用程序与包含的所有三个模块一起运行良好。 When either of them is removed, the app works but I receive few errors in the console[img attached].当它们中的任何一个被删除时，该应用程序都可以运行，但我在控制台中收到了一些错误[img附加]。

I am trying to create independent modules within the same component that can be plugged in and out of the application.我正在尝试在可以插入和拔出应用程序的同一组件中创建独立模块。 Like for example, a header, footer and body module.例如，页眉、页脚和正文模块。 Some pages may not need the header, so I can skip the app-header include.有些页面可能不需要标题，所以我可以跳过 app-header 包含。

Is my approach right?我的做法对吗？

Answer 1

I just found this and it works fine我刚找到这个，它工作正常

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

Module approach:模块方法：

 @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

Include this main module if you want all of them, or include only relevant modules.如果您需要所有这些主模块，或者仅包含相关模块，请包括此主模块。

Although you can create individual modules for each component and use them as and when required or all at one by importing them, you can still go ahead and bootstrap multiple components by mentioning them once after another in the array index of bootstrap.尽管您可以为每个组件创建单独的模块，并在需要时使用它们或通过导入它们全部使用它们，但您仍然可以继续引导多个组件，方法是在 bootstrap 的数组索引中一次又一次地提及它们。

eg.)例如。）

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

Provided you have all the bootstrapping components on place right on start, something like,如果您在开始时就拥有所有引导组件，例如，

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

This probably should work.这可能应该有效。

More info:更多信息：

How to dynamically create bootstrap modals as Angular2 components? 如何动态创建引导模式作为 Angular2 组件？

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

Hope it helps.希望能帮助到你。

Let me know in case of more edits.如果有更多编辑，请告诉我。

Answer 3

Mano,马诺，

I would probably bootstrap the application in one piece:我可能会在一块中引导应用程序：

<app>Loading...</app>

And then make components for a header and footer and include them as child views in the main component.然后为页眉和页脚制作组件，并将它们作为子视图包含在主组件中。

在 Angular2 中引导多个组件

问题描述

3 个解决方案

解决方案1
13 2017-09-06 12:36:46

解决方案2
4 2017-01-16 17:43:30

解决方案3
2 2017-01-16 17:07:37

在 Angular2 中引导多个组件

问题描述

3 个解决方案

解决方案1 13 2017-09-06 12:36:46

解决方案2 4 2017-01-16 17:43:30

解决方案3 2 2017-01-16 17:07:37

解决方案1
13 2017-09-06 12:36:46

解决方案2
4 2017-01-16 17:43:30

解决方案3
2 2017-01-16 17:07:37