Bootstrapping multiple components in Angular2

2020-02-05 09:19发布

站内文章 / JavaScript
32 0 0

问题:

My question is inline with this question: Error when bootstrapping multiple angular2 modules

My index.html has the following code

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

bootstrap: [AppComponent,HeaderComponent,FooterComponent]

and in my main.ts, I bootstrap them

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].

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.

Is my approach right?

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


回答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.

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?

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

Hope it helps.

Let me know in case of more edits.



回答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.



标签： javascript angular typescript
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~