Angular 10中如何通过ngComponentOutlet向动态组件传参及绑定事件？

直接在<ng-container>上为ngComponentOutlet添加输入属性（如[isBilling]）和事件绑定（如(saveAddressEvent)）是无效的——ngComponentOutlet指令不会自动将这些属性传递给动态创建的组件，必须通过组件实例手动设置输入、绑定事件。

以下是两种可行的实现方案：

方案一：使用ComponentFactoryResolver手动创建组件 #

这种方式更灵活，适合需要精细控制组件生命周期的场景。

1. 定义动态组件 #

首先确保动态组件AddressFormComponent已正确声明输入和输出：

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

@Component({
  selector: 'app-address-form',
  template: `
    <div>
      <p>是否为账单地址：{{ isBilling }}</p>
      <button (click)="saveAddress()">保存地址</button>
    </div>
  `
})
export class AddressFormComponent {
  @Input() isBilling: boolean;
  @Output() saveAddressEvent = new EventEmitter<any>();

  saveAddress() {
    // 模拟地址数据
    this.saveAddressEvent.emit({ street: 'XX街道', city: 'XX市' });
  }
}

2. 父组件中加载动态组件 #

父组件模板预留容器：

<ng-container #dynamicComponentContainer></ng-container>

父组件TS代码实现组件创建、传参和事件绑定：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { AddressFormComponent } from './address-form.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  isBilling = true;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    this.renderDynamicComponent();
  }

  renderDynamicComponent() {
    // 清空容器内现有组件
    this.container.clear();
    // 创建组件工厂
    const componentFactory = this.resolver.resolveComponentFactory(AddressFormComponent);
    // 生成组件实例
    const componentRef = this.container.createComponent(componentFactory);

    // 传递输入属性
    componentRef.instance.isBilling = this.isBilling;
    // 绑定输出事件
    componentRef.instance.saveAddressEvent.subscribe(address => {
      this.saveNewAddress(address);
    });

    // 若isBilling后续动态变化，可在此添加监听逻辑同步更新组件实例
  }

  saveNewAddress(address: any) {
    console.log('待保存地址：', address);
    // 实现你的地址保存逻辑
  }
}

方案二：通过NgComponentOutlet引用组件实例 #

如果更倾向于使用ngComponentOutlet指令，可以通过视图引用获取动态组件实例，再手动设置输入和绑定事件。

1. 父组件模板 #

<ng-container 
  [ngComponentOutlet]="addressForm"
  #componentOutlet="ngComponentOutlet"
></ng-container>

2. 父组件TS代码 #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { AddressFormComponent } from './address-form.component';
import { NgComponentOutlet } from '@angular/common';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  addressForm = AddressFormComponent;
  isBilling = true;
  @ViewChild('componentOutlet') outlet: NgComponentOutlet;
  private componentInstanceRef: any;

  ngAfterViewInit() {
    // 获取动态组件实例
    this.componentInstanceRef = this.outlet?.componentRef?.instance;
    if (this.componentInstanceRef) {
      // 设置输入属性
      this.componentInstanceRef.isBilling = this.isBilling;
      // 绑定事件
      this.componentInstanceRef.saveAddressEvent.subscribe(address => {
        this.saveNewAddress(address);
      });
    }
  }

  saveNewAddress(address: any) {
    console.log('保存地址：', address);
    // 实现你的地址保存逻辑
  }
}

内容的提问来源于stack exchange，提问作者Miraj