Angular2 /动态模式弹出

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

@Component({
  selector: 'app-popup',
  template: `<div class="popup">
               <h3>{{title}}</h3>
               <p>{{message}}</p>
               <button (click)="close()">Close</button>
             </div>`,
  styles: [`
    .popup {
      border: 1px solid black;
      padding: 10px;
      background-color: white;
    }
  `]
})
export class PopupComponent implements OnInit {
  title: string;
  message: string;

  constructor() {}

  ngOnInit(): void {}

  close(): void {
    // 关闭弹出窗口的逻辑
  }
}

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { PopupComponent } from './popup.component';

@Component({
  selector: 'app-root',
  template: `<ng-container #popupContainer></ng-container>`,
})
export class AppComponent {
  @ViewChild('popupContainer', { read: ViewContainerRef }) popupContainer: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  showPopup(title: string, message: string): void {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent);
    const popupComponentRef = this.popupContainer.createComponent(componentFactory);

    popupComponentRef.instance.title = title;
    popupComponentRef.instance.message = message;
    popupComponentRef.instance.close = () => {
      popupComponentRef.destroy();
    };
  }
}