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 { }