Javascript 在Angular2中引导多个组件

我的问题与这个问题是一致的：

Myindex.html包含以下代码

正在加载标题。。。
加载。。。
正在加载页脚…

Mano

我可能会将应用程序整体引导：

<app>Loading...</app>

正在加载。。。

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

模块方法：

@NgModule({
声明：[App1]，
出口：[附件1]
})
导出类App1模块
@NGD模块({
声明：[App2]，
出口：[App2]
})
导出类app2模块
@NGD模块({
导入：[App1模块，App2模块]，
导出：[App1模块，App2模块]
})
export class main模块

我刚找到，工作正常

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

import{NgModule，Injectable，APP_初始值设定项，ApplicationRef，Type，ComponentFactoryResolver}来自'@angular/core'；
从“./FooterComponent”导入{FooterComponent}；
从“./AppComponent”导入{AppComponent}；
从“/HeaderComponent”导入{HeaderComponent}；
常量组件=[AppComponent、HeaderComponent、FooterComponent]；
@NGD模块({
声明：[
应用组件，
头部组件，
页脚组件
],
进口：[
浏览器模块，
FormsModule，
HttpModule
],
入口组件：组件，
提供者：[]
})
导出类AppModule{
构造函数（专用冲突解决程序：ComponentFactoryResolver）{}
ngDoBootstrap（appRef:ApplicationRef）{
components.forEach（（componentDef:Type）=>{
const factory=this.resolver.resolveComponentFactory（componentDef）；
if（文档查询选择器（工厂选择器））{
appRef.bootstrap（工厂）；
}
});
}
}

这是个好主意，但我之所以没有使用这种方法，是因为我打算创建的独立组件将根据需要由不同的团队使用。因此，如果团队不希望在代码中使用标题，他们只需在html中省略app标题。这里需要注意的一点是，在html中使用这些组件的团队将无法访问开发代码。Angular 2作为SPA应该作为一个单独的单元使用——这些组件不能在Angular上下文之外使用。因此，如果这些团队正在运行ng2应用程序，那么可以直接在他们的应用程序中包含一个离散组件。为什么不为你说要使用的每个组件创建as modules@NgModule，如果你需要所有组件，就将其全部包含，或者只包含所需组件。原因是，Angular2本身鼓励模块化方法，这是>RC0.5版本的重要转换的主要原因。您找到答案了吗？那么，如果在您的代码中，您的html中没有包含app1和app2，该怎么办。如果没有任何错误，它还能工作吗？不，我认为它不会工作。因为它是自举的，所以它希望在htmlI中出现一些东西，也就是说，它可以正常工作，但是您仍然会看到错误。