Angular：从代码设置@Output属性——动态组件场景下的技术问询

完全不需要在模板里写(something)="doSomething()"，你可以直接在父组件的TypeScript代码中订阅子组件的@Output事件，不管是静态组件、动态组件还是内容投影的组件，都能通过你提到的ViewChildren、ContentChildren、ViewContainerRef这些API实现。下面分场景给你具体例子：

1. 静态子组件：用ViewChild/ViewChildren订阅 #

如果子组件是在父组件模板中静态声明的，你可以用ViewChild（单个实例）或ViewChildren（多个实例）获取组件引用，然后直接订阅它的@Output事件：

import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { ChildComponent } from './child.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: '<app-child></app-child>'
})
export class ParentComponent implements AfterViewInit, OnDestroy {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;
  private destroy$ = new Subject<void>();

  ngAfterViewInit() {
    // 订阅子组件的Output，记得用takeUntil防止内存泄漏
    this.childComponent.onAction
      .pipe(takeUntil(this.destroy$))
      .subscribe((data) => {
        console.log('收到子组件事件:', data);
        this.handleChildAction(data);
      });
  }

  handleChildAction(data: string) {
    // 这里写你的业务逻辑
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

2. 动态组件：用ViewContainerRef创建并订阅 #

对于动态创建的组件，你在通过ViewContainerRef创建组件实例后，直接访问componentRef.instance就能拿到子组件的引用，进而订阅它的@Output：

import { Component, ViewContainerRef, OnInit, OnDestroy } from '@angular/core';
import { ChildComponent } from './child.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: '<div #dynamicHost></div>'
})
export class ParentComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private vcr: ViewContainerRef) {}

  ngOnInit() {
    // Angular 9+ 可以直接传入组件类创建动态组件
    const componentRef = this.vcr.createComponent(ChildComponent);
    
    // 订阅动态组件的Output事件
    componentRef.instance.onAction
      .pipe(takeUntil(this.destroy$))
      .subscribe((data) => {
        console.log('动态子组件触发事件:', data);
        this.handleChildAction(data);
      });
  }

  handleChildAction(data: string) {
    // 业务逻辑处理
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

3. 内容投影组件：用ContentChildren订阅 #

如果子组件是通过ng-content投影到父组件中的，就用ContentChildren获取所有投影的子组件实例，然后逐个订阅：

import { Component, ContentChildren, QueryList, AfterContentInit, OnDestroy } from '@angular/core';
import { ChildComponent } from './child.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: '<ng-content></ng-content>'
})
export class ParentComponent implements AfterContentInit, OnDestroy {
  @ContentChildren(ChildComponent) childComponents!: QueryList<ChildComponent>;
  private destroy$ = new Subject<void>();

  ngAfterContentInit() {
    // 订阅已存在的投影子组件事件
    this.subscribeToChildComponents(this.childComponents);

    // 监听QueryList的变化，订阅新添加的子组件
    this.childComponents.changes
      .pipe(takeUntil(this.destroy$))
      .subscribe((newChildren) => {
        this.subscribeToChildComponents(newChildren);
      });
  }

  private subscribeToChildComponents(children: QueryList<ChildComponent>) {
    children.forEach(child => {
      child.onAction
        .pipe(takeUntil(this.destroy$))
        .subscribe(data => {
          console.log('投影子组件触发事件:', data);
          this.handleChildAction(data);
        });
    });
  }

  handleChildAction(data: string) {
    // 业务逻辑
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

几个关键注意点 #

• 时机问题：要确保在组件实例初始化完成后再订阅，比如AfterViewInit对应ViewChild，AfterContentInit对应ContentChildren，动态组件创建后可以立即订阅。
• 内存泄漏：一定要记得在父组件销毁时取消订阅，上面的例子用了takeUntil操作符，这是Angular中常用的防泄漏方式。
• Angular版本兼容：Angular 9及以上版本简化了动态组件创建，直接用ViewContainerRef.createComponent(ComponentClass)即可，不需要再用ComponentFactoryResolver。

内容的提问来源于stack exchange，提问作者Roland Rácz