[Angular] Dynamic component rendering by using *ngComponentOutlet

转载

mob604756f4c9c3 2018-12-26 18:26:00

文章标签 ide bootstrap html css sed 文章分类 代码人生

Let's say you want to rending some component based on condition, for example a Tabs component. Inside tabs, you want to render different tab component:

<div *ngFor="let comp of comps">
  <ng-container *ngComponentOutlet="comp"></ng-container>
</div>

Generate three components by using CLI:

ng g c one
ng g c two
ng g c three

Add those componets into 'entryComponents' & 'declarations':

@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    TwoComponent,
    ThreeComponent
  ],
  imports: [
    BrowserModule,
  ],
  entryComponents: [
    OneComponent,
    TwoComponent,
    ThreeComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then we can assign those components to 'comps' variable in app.component.ts:

  comps: any[] = [
    OneComponent,
    TwoComponent,
    ThreeComponent
  ];

[Angular] Dynamic component rendering by using *ngComponentOutlet_sed

We can also rendering other componets form other modules, not necessary to be in the same module, we can generate a module and a component:

ng g m other
ng g c my --module other

Here we generate a 'OtherModule' and 'MyComponent' in OtherModule.

Using 'ngModuleFactory' to tell from which module you want to import the component:

<ng-container *ngComponentOutlet="OtherModuleComponent;
                                      ngModuleFactory: myModule;"></ng-container>

We need to import 'OtherModule':

@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    TwoComponent,
    ThreeComponent
  ],
  imports: [
    BrowserModule,
    OtherModule
  ],
  entryComponents: [
    OneComponent,
    TwoComponent,
    ThreeComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then in 'OtherModule', we need to add 'MyComponent' into 'entryComponents' & 'declarations':

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my/my.component';

@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule
  ],
  entryComponents: [
    MyComponent
  ]
})
export class OtherModule { }

Now back to app.component.ts, we can declare:

import { Component, NgModuleFactory, Compiler } from '@angular/core';
import { MyComponent } from './other/my/my.component';
import { OtherModule } from './other/other.module';  

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  OtherModuleComponent = MyComponent;
  myModule: NgModuleFactory<any>;

   constructor(compiler: Compiler) {
    this.myModule = compiler.compileModuleSync(OtherModule);
  }

}