当前位置:  开发笔记 > 编程语言 > 正文

在Angular2中引导多个组件

如何解决《在Angular2中引导多个组件》经验,为你挑选了1个好方法。

我的问题是内联这个问题: 引导多个angular2模块时出错

我的index.html有以下代码

  Loading header...
  Loading...
  Loading footer...

在我的app.module.ts中,我将这3个组件提供给bootstrap:

bootstrap: [AppComponent,HeaderComponent,FooterComponent]

在我的主页上,我引导他们

platformBrowserDynamic().bootstrapModule(AppModule);

该应用程序适用于所有三个模块.当其中任何一个被删除时,该应用程序可以工作但我在控制台[img attach]中收到的错误很少. 在此输入图像描述

我试图在同一组件中创建可以插入和移出应用程序的独立模块.例如,页眉,页脚和正文模块.有些页面可能不需要标题,因此我可以跳过app-header include.

我的做法是对的吗?



1> N1gthm4r3..:

我刚刚发现这个和它工作正常

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

推荐阅读
爱唱歌的郭少文_
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有