Angular动态组件

一、主页面：

app.component.html：

  <button (click)="load();">动态</button>
 2<div #domRoom><!--动态组件加载到这个div里--></div>

app.component.ts：

 import {Component, ViewContainerRef, ViewChild, ComponentFactoryResolver} from '@angular/core';
 import {DynamicdialogComponent} from "./dynamicdialog/dynamicdialog.component";

 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {

   @ViewChild('domRoom', {read: ViewContainerRef}) domRoom: ViewContainerRef;

   constructor(public cfr: ComponentFactoryResolver,){}

   load(){
     let com = this.cfr.resolveComponentFactory(DynamicdialogComponent);
     let comref = this.domRoom.createComponent(com);
     let data = [];
     comref.instance.sourseData  = data;  //创建动态组件传输数据
     comref.instance.myWorkOver.subscribe((msg) => { // 订阅组件传出事件 判断执行销毁组件操作
       if (msg) {
         this.domRoom.clear();
       }
     });
   }
 }

二、动态组件：

dynamicdialog.component.html：

 <p-dialog header="动态组件" [(visible)]="display" modal="modal" width="850" [responsive]="true" (onHide)="dialogHide()">
  666
 </p-dialog>

dynamicdialog.component.ts：

 import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';

 @Component({
   selector: 'app-dynamicdialog',
   templateUrl: './dynamicdialog.component.html',
   styleUrls: ['./dynamicdialog.component.css']
 })
 export class DynamicdialogComponent implements OnInit {

   @Input() sourseData: any; // 外部传入的数据源
   @Output() myWorkOver: EventEmitter<boolean> = new EventEmitter<boolean>(); // 用于向外传事件(根据实际业务，也可以改为EventEmitter<any>)
   public display: boolean = true; // 默认显示dialog

   constructor() { }

   ngOnInit() {
   }

   dialogHide() { // dialog hide调用 默认认为当dialog 关闭了 就销毁组件 实际业务按需求综合考虑
     this.myWorkOver.emit(true); // 向外传播事件 并将消息体传播出去
   }

 }

app.module.ts:

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { DataTableModule } from 'primengcn/primeng';
 import { AppRoutingModule } from './app-routing.module';
 import {DialogModule} from 'primengcn/components/dialog/dialog';
 import { AppComponent } from './app.component';
 import { DynamicdialogComponent } from './dynamicdialog/dynamicdialog.component';
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

 @NgModule({
   declarations: [
     AppComponent,
     DynamicdialogComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     DialogModule,
     DataTableModule,
     BrowserAnimationsModule
   ],
   entryComponents: [
     DynamicdialogComponent
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }