Angular:从动态组件传回数据

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

@Component({
  selector: 'app-dynamic-component',
  template: `
    <div>
      <h2>动态组件</h2>
      <p>{{ data }}</p>
      <button (click)="sendData()">发送数据</button>
    </div>
  `,
})
export class DynamicComponent {
  @Input() data: string;
  @Output() dataEvent = new EventEmitter<string>();

  sendData() {
    this.dataEvent.emit('这是从动态组件传回的数据');
  }
}

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic-component.component';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h2>父组件</h2>
      <ng-container #dynamicComponentContainer></ng-container>
      <button (click)="loadDynamicComponent()">加载动态组件</button>
      <p>{{ receivedData }}</p>
    </div>
  `,
})
export class ParentComponent {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  receivedData: string;

  constructor(private resolver: ComponentFactoryResolver) {}

  loadDynamicComponent() {
    this.container.clear();
    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
    const componentRef = this.container.createComponent(factory);
    componentRef.instance.data = '这是从父组件传递给动态组件的数据';
    componentRef.instance.dataEvent.subscribe((data: string) => {
      this.receivedData = data;
    });
  }
}