Angular中如何动态加载子组件并实现子向父组件传值？

场景现状 #

父组件 landing-home.component 通过 ViewContainerRef 在 <ng-template> 上动态加载子组件 client-registration-form.component，渲染逻辑在 ngAfterViewInit 钩子中完成。client-registration-form.component 是带输入字段的表单组件，目前用 BehaviorSubject 存储表单输入数据，需要在父组件中捕获这些数据。

现有代码 #

client-registration-form.component.html #

<div>
    <div>
        <span>First Name</span>
        <input type="text" [(ngModel)]='clientRegistrationMoel.firstName'/>
    </div>
    <!-- 其他字段省略 -->
    <div>
        <input type="button" value="Submit" (click)="OnSubmit()">
    </div>
</div>

client-registration-form.component.ts #

import { Component, Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import {ClientRegistrationModel} from '../models/client-registration.model';

@Component({
  selector: 'app-client-registration-form',
  templateUrl: './client-registration-form.component.html'
})
@Injectable()
export class ClientRegistrationFormComponent {
   clientRegistrationMoel : ClientRegistrationModel = new ClientRegistrationModel("","","","","");
  constructor() {}
  private messageSource = new BehaviorSubject<ClientRegistrationModel>(new ClientRegistrationModel("","","","",""));
  public currentMessage = this.messageSource.asObservable();

  OnSubmit()
  {
    this.messageSource.next(this.clientRegistrationMoel);
  }
}

landing-home.component.html #

<div>
    <ng-template #container></ng-template>
</div>
<!-- 父组件其他HTML内容省略 -->

landing-home.component.ts（注：原代码后缀误写为.js，实际应为.ts） #

import { Component, ViewChild, ViewContainerRef, Input, ChangeDetectorRef } from '@angular/core';
import {ClientRegistrationFormComponent} from '../client-registration-form/client-registration-form.component';
import {ClientRegistrationModel} from '../models/client-registration.model';

@Component({
  selector: 'app-landing-home',
  templateUrl: './landing-home.component.html'
})

export class LandingHomeComponent {
  @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef;
  constructor(private clientRegistrationFormComponent: ClientRegistrationFormComponent,
              private changeDetector: ChangeDetectorRef){}

  registrationDetails : ClientRegistrationModel = new ClientRegistrationModel('','','','');
 
  ngAfterViewInit()
  {
    // 自定义加载条件
    this.container.createComponent(ClientRegistrationFormComponent);
    this.changeDetector.detectChanges(); 
  }
}

核心需求 #

存在多个子组件（A、B、C等），父组件会根据特定条件动态加载对应子组件，需要实现当前加载的子组件向父组件传递数据（如表单输入内容、表单提交成功/失败的布尔状态）。不希望用 *ngIf 处理加载逻辑，需要更优的实现方案。

解决方案 #

方案1：统一接口约束 + 动态实例监听（最推荐） #

适合大量子组件的场景，通过定义通用接口实现强类型约束，父组件无需关注子组件具体类型，扩展性强。

1. 定义通用数据传递接口

import { Observable } from 'rxjs';
// 可根据实际需求定义通用数据模型，或用泛型适配不同子组件数据
export interface DynamicComponent<T> {
  dataOutput$: Observable<T>;
}

2. 子组件实现接口
   移除不必要的 @Injectable() 装饰器（组件无需注入，由Angular组件工厂创建），调整代码实现接口：

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import {ClientRegistrationModel} from '../models/client-registration.model';
import { DynamicComponent } from '../interfaces/dynamic-component.interface';

@Component({
  selector: 'app-client-registration-form',
  templateUrl: './client-registration-form.component.html'
})
export class ClientRegistrationFormComponent implements DynamicComponent<ClientRegistrationModel> {
  clientRegistrationMoel: ClientRegistrationModel = new ClientRegistrationModel("","","","","");
  dataOutput$: Observable<ClientRegistrationModel>;
  private messageSource = new BehaviorSubject<ClientRegistrationModel>(new ClientRegistrationModel("","","","",""));

  constructor() {
    this.dataOutput$ = this.messageSource.asObservable();
  }

  OnSubmit() {
    this.messageSource.next(this.clientRegistrationMoel);
  }
}

3. 父组件动态加载并监听数据流

import { Component, ViewChild, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
import {ClientRegistrationFormComponent} from '../client-registration-form/client-registration-form.component';
import {ClientRegistrationModel} from '../models/client-registration.model';
import { DynamicComponent } from '../interfaces/dynamic-component.interface';

@Component({
  selector: 'app-landing-home',
  templateUrl: './landing-home.component.html'
})

export class LandingHomeComponent {
  @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef;
  registrationDetails : ClientRegistrationModel = new ClientRegistrationModel('','','','');
 
  constructor(private changeDetector: ChangeDetectorRef){}

  ngAfterViewInit() {
    // 根据条件选择要加载的组件（示例为ClientRegistrationFormComponent）
    const componentRef = this.container.createComponent(ClientRegistrationFormComponent);
    // 断言组件实现了DynamicComponent接口，或做类型检查
    const dynamicComponent = componentRef.instance as DynamicComponent<ClientRegistrationModel>;
    
    // 监听子组件数据输出
    dynamicComponent.dataOutput$.subscribe(data => {
      this.registrationDetails = data;
      // 这里添加数据处理逻辑
    });

    this.changeDetector.detectChanges(); 
  }
}

方案2：@Output事件绑定（适合简单单次事件） #

如果子组件仅需传递单次事件（如提交成功/失败），可使用Angular原生的 @Output 装饰器：

1. 子组件定义Output事件

import { Component, Output, EventEmitter } from '@angular/core';
import {ClientRegistrationModel} from '../models/client-registration.model';

@Component({
  selector: 'app-client-registration-form',
  templateUrl: './client-registration-form.component.html'
})
export class ClientRegistrationFormComponent {
  clientRegistrationMoel: ClientRegistrationModel = new ClientRegistrationModel("","","","","");
  @Output() formSubmitted = new EventEmitter<ClientRegistrationModel>();

  OnSubmit() {
    this.formSubmitted.emit(this.clientRegistrationMoel);
  }
}

2. 父组件动态绑定事件

export class LandingHomeComponent {
  @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef;
  registrationDetails : ClientRegistrationModel = new ClientRegistrationModel('','','','');
 
  constructor(private changeDetector: ChangeDetectorRef){}

  ngAfterViewInit() {
    const componentRef = this.container.createComponent(ClientRegistrationFormComponent);
    // 绑定子组件的Output事件
    componentRef.instance.formSubmitted.subscribe(data => {
      this.registrationDetails = data;
      // 处理逻辑
    });
    this.changeDetector.detectChanges(); 
  }
}

方案3：全局服务中转（适合跨组件共享数据） #

如果需要跨多级组件传递数据，或多个组件共享数据状态，可使用全局服务作为中转：

1. 创建数据共享服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { CommonDataModel } from '../models/common-data.model';

@Injectable({ providedIn: 'root' })
export class DataSharingService {
  private dataSubject = new BehaviorSubject<CommonDataModel | null>(null);
  data$ = this.dataSubject.asObservable();

  sendData(data: CommonDataModel) {
    this.dataSubject.next(data);
  }
}

2. 子组件注入服务并发送数据

import { Component } from '@angular/core';
import {ClientRegistrationModel} from '../models/client-registration.model';
import { DataSharingService } from '../services/data-sharing.service';

@Component({
  selector: 'app-client-registration-form',
  templateUrl: './client-registration-form.component.html'
})
export class ClientRegistrationFormComponent {
  clientRegistrationMoel: ClientRegistrationModel = new ClientRegistrationModel("","","","","");
  
  constructor(private dataSharingService: DataSharingService) {}

  OnSubmit() {
    this.dataSharingService.sendData(this.clientRegistrationMoel);
  }
}

3. 父组件注入服务并监听数据

import { Component, ViewChild, ViewContainerRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
import {ClientRegistrationFormComponent} from '../client-registration-form/client-registration-form.component';
import {ClientRegistrationModel} from '../models/client-registration.model';
import { DataSharingService } from '../services/data-sharing.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-landing-home',
  templateUrl: './landing-home.component.html'
})

export class LandingHomeComponent implements OnDestroy {
  @ViewChild('container', {read: ViewContainerRef}) container!: ViewContainerRef;
  registrationDetails : ClientRegistrationModel = new ClientRegistrationModel('','','','');
  private dataSubscription!: Subscription;
 
  constructor(private dataSharingService: DataSharingService,
              private changeDetector: ChangeDetectorRef){
    // 提前监听数据
    this.dataSubscription = this.dataSharingService.data$.subscribe(data => {
      if(data instanceof ClientRegistrationModel) {
        this.registrationDetails = data;
      }
    });
  }

  ngAfterViewInit() {
    this.container.createComponent(ClientRegistrationFormComponent);
    this.changeDetector.detectChanges(); 
  }

  ngOnDestroy() {
    // 销毁订阅避免内存泄漏
    this.dataSubscription.unsubscribe();
  }
}

方案对比与选择 #

• 方案1：最推荐，强类型约束，扩展性好，适合大量子组件的场景，父组件无需关注子组件具体实现。
• 方案2：代码简洁，符合Angular原生组件通信习惯，适合简单单次事件传递。
• 方案3：适合跨多级组件或多组件共享数据的场景，但需注意在组件销毁时取消订阅，避免内存泄漏。

额外注意：动态创建组件时，若需切换子组件，记得调用 componentRef.destroy() 销毁旧组件，避免内存泄漏。

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