logo标签列表

在Angular2中引导多个组件

javascriptangulartypescript
13

我的问题与此问题相同：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);

应用程序包含的三个模块都可以正常工作。当其中任何一个被移除时，应用程序仍然可以工作，但是在控制台中会收到一些错误消息[附带的图像]。 enter image description here 我正在尝试创建同一组件内的独立模块，这些模块可以插入和拔出应用程序。例如，页眉、页脚和正文模块。某些页面可能不需要页眉，因此我可以跳过 app-header 的包含。
我的方法正确吗？
为什么不为您想要使用的每个组件创建@ NgModule模块，如果需要全部使用它们，则将它们全部包含，或者只包含所需的部分。原因是，Angular2本身鼓励模块化方法，这也是RC0.5版本之后的主要原因。 - Arunkumar Srisailapathi
https://github.com/angular/zone.js/issues/427 - Arunkumar Srisailapathi
你找到答案了吗？ - N1gthm4r3
3个回答
14

我刚刚发现这个，而且它运行良好

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);
            }
        });
    }
}
4

模块化方法:

@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>

这应该可以工作。

更多信息：

如何将Bootstrap模态框动态创建为Angular2组件？

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

希望能有所帮助。

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

如果在你的代码中，没有在HTML中包含app1和app2，那么它仍然能够正常工作吗？ - Manoj Amalraj
2
不，我认为它不会起作用。因为它是自举的，它期望在HTML中存在某些内容。 - Arunkumar Srisailapathi
1
我的意思是，它会正常工作，但你仍然会看到错误。 - Arunkumar Srisailapathi
2

您好，

我建议将应用程序一次性引导：

<app>Loading...</app>

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

这是一个好主意，但我没有使用这种方法的原因是，我要创建的独立组件将根据需要由不同的团队使用。因此，如果一个团队不希望在他们的代码中使用标题，他们会在他们的HTML中省略app-header包含。 这里需要注意的重要一点是，在其HTML中使用这些组件的团队将无法访问开发代码。 - Manoj Amalraj
1
Angular 2作为单页应用程序，可能应该作为一个单一的单元提供服务--这些组件不能在angular上下文之外使用。因此，如果这些团队正在运行ng2应用程序，那么具有离散组件可以直接包含在他们的应用程序中。 - chrispy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接