Angular中使用ng-template切换视图时如何传递数据？

在Angular里用ng-template结合指令实现动态组件切换时，传递数据其实有几种很顺手的方案，我给你梳理清楚：

1. 直接给组件实例赋值（最常用） #

这是最简单直接的方式，当你创建完动态组件实例后，直接给它的属性传值就行。比如你的loadComponent方法可以这么改：

loadComponent(details) {
  const _vcf = this.childArea.viewContainerRef;
  _vcf.clear(); // 先清空容器里之前的组件
  const componentFactory = resolveComponentFactory(childrenList[details.type]);
  const componentRef = _vcf.createComponent(componentFactory);
  
  // 直接给子组件的属性赋值传数据
  componentRef.instance.itemData = details.data;
  
  // 如果需要接收子组件的反馈数据，还可以订阅它的@Output事件
  componentRef.instance.onDataUpdated.subscribe((updatedData) => {
    // 在这里处理子组件传回的数据
    console.log('子组件更新的数据:', updatedData);
  });
}

对应的子组件只需要定义好接收数据的属性（可以用@Input规范标注）：

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

export class ChildComponent {
  @Input() itemData: any; // 接收父组件传递的数据
  @Output() onDataUpdated = new EventEmitter<any>(); // 向父组件传数据
}

这种方式符合Angular组件传值的标准规范，可读性强，单向/双向交互都能实现。

2. 用Injector注入数据 #

如果你的动态组件需要在初始化时就拿到数据，或者想通过依赖注入的方式传递，可以自定义Injector：

import { Injector } from '@angular/core';

loadComponent(details) {
  const _vcf = this.childArea.viewContainerRef;
  _vcf.clear();
  
  // 创建包含自定义数据的注入器，继承父组件的注入器上下文
  const customInjector = Injector.create({
    providers: [
      { provide: 'DynamicComponentData', useValue: details.data }
    ],
    parent: this.injector
  });
  
  const componentFactory = resolveComponentFactory(childrenList[details.type]);
  // 创建组件时传入自定义注入器
  const componentRef = _vcf.createComponent(componentFactory, { injector: customInjector });
}

子组件里通过@Inject获取注入的数据：

import { Inject } from '@angular/core';

export class ChildComponent {
  constructor(@Inject('DynamicComponentData') public data: any) {}
}

这种方式适合需要在组件构造阶段就拿到数据的场景，避免了后续赋值的步骤。

3. 用共享服务传递复杂状态 #

如果多个动态组件或者父组件和动态组件需要共享复杂的状态数据，比如需要实时同步数据变化，可以创建一个共享服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DynamicDataService {
  // 用BehaviorSubject存储共享数据，初始值可以设为null
  private dataSubject = new BehaviorSubject<any>(null);
  // 对外暴露可观察对象，避免直接修改源数据
  data$ = this.dataSubject.asObservable();

  // 设置共享数据的方法
  updateData(newData: any) {
    this.dataSubject.next(newData);
  }
}

父组件里调用服务更新数据：

constructor(private dataService: DynamicDataService) {}

loadComponent(details) {
  // 先更新共享数据
  this.dataService.updateData(details.data);
  // 再创建动态组件
  const _vcf = this.childArea.viewContainerRef;
  _vcf.clear();
  const componentFactory = resolveComponentFactory(childrenList[details.type]);
  _vcf.createComponent(componentFactory);
}

子组件订阅服务获取实时数据：

import { OnInit } from '@angular/core';
import { DynamicDataService } from './dynamic-data.service';

export class ChildComponent implements OnInit {
  currentData: any;

  constructor(private dataService: DynamicDataService) {}

  ngOnInit() {
    // 订阅数据变化
    this.dataService.data$.subscribe(data => {
      this.currentData = data;
    });
  }
}

这种方式适合跨组件的状态共享，尤其是多个动态组件需要同步数据的场景。

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