Angular动态组件

一、主页面：

app.component.html：

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

View Code

app.component.ts：

 1 import {Component, ViewContainerRef, ViewChild, ComponentFactoryResolver} from '@angular/core';
 2 import {DynamicdialogComponent} from "./dynamicdialog/dynamicdialog.component";
 3 
 4 @Component({
 5   selector: 'app-root',
 6   templateUrl: './app.component.html',
 7   styleUrls: ['./app.component.css']
 8 })
 9 export class AppComponent {
10 
11   @ViewChild('domRoom', {read: ViewContainerRef}) domRoom: ViewContainerRef;
12 
13   constructor(public cfr: ComponentFactoryResolver,){}
14 
15   load(){
16     let com = this.cfr.resolveComponentFactory(DynamicdialogComponent);
17     let comref = this.domRoom.createComponent(com);
18     let data = [];
19     comref.instance.sourseData  = data;  //创建动态组件传输数据
20     comref.instance.myWorkOver.subscribe((msg) => { // 订阅组件传出事件 判断执行销毁组件操作
21       if (msg) {
22         this.domRoom.clear();
23       }
24     });
25   }
26 }

View Code

二、动态组件：

dynamicdialog.component.html：

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

View Code

dynamicdialog.component.ts：

 1 import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-dynamicdialog',
 5   templateUrl: './dynamicdialog.component.html',
 6   styleUrls: ['./dynamicdialog.component.css']
 7 })
 8 export class DynamicdialogComponent implements OnInit {
 9 
10   @Input() sourseData: any; // 外部传入的数据源
11   @Output() myWorkOver: EventEmitter<boolean> = new EventEmitter<boolean>(); // 用于向外传事件(根据实际业务，也可以改为EventEmitter<any>)
12   public display: boolean = true; // 默认显示dialog
13 
14   constructor() { }
15 
16   ngOnInit() {
17   }
18 
19   dialogHide() { // dialog hide调用 默认认为当dialog 关闭了 就销毁组件 实际业务按需求综合考虑
20     this.myWorkOver.emit(true); // 向外传播事件 并将消息体传播出去
21   }
22 
23 }

View Code

app.module.ts:

 1 import { BrowserModule } from '@angular/platform-browser';
 2 import { NgModule } from '@angular/core';
 3 import { DataTableModule } from 'primengcn/primeng';
 4 import { AppRoutingModule } from './app-routing.module';
 5 import {DialogModule} from 'primengcn/components/dialog/dialog';
 6 import { AppComponent } from './app.component';
 7 import { DynamicdialogComponent } from './dynamicdialog/dynamicdialog.component';
 8 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 9 
10 
11 @NgModule({
12   declarations: [
13     AppComponent,
14     DynamicdialogComponent
15   ],
16   imports: [
17     BrowserModule,
18     AppRoutingModule,
19     DialogModule,
20     DataTableModule,
21     BrowserAnimationsModule
22   ],
23   entryComponents: [
24     DynamicdialogComponent
25   ],
26   providers: [],
27   bootstrap: [AppComponent]
28 })
29 export class AppModule { }

View Code