Angular中如何将父组件接收的所有Props传递给动态子组件？

Angular没有React中{...props}这种直接展开所有属性的语法，但针对动态组件的场景，有几种可行的实现方式：

1. 批量设置动态组件的输入属性 #

如果子组件的输入属性可预见（但你不想逐个手动传递），可以遍历父组件的属性集合，批量赋值给动态组件实例：

父组件代码 #

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

@Component({
  selector: 'app-parent',
  template: `<div #dynamicContainer></div>`
})
export class ParentComponent implements OnInit {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
  
  // 模拟需要传递的所有属性
  parentProps = {
    title: 'Angular动态组件传参',
    description: '批量传递所有属性',
    itemCount: 5
  };

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    this.renderDynamicComponent();
  }

  renderDynamicComponent() {
    this.container.clear();
    const factory = this.resolver.resolveComponentFactory(DynamicChildComponent);
    const componentRef = this.container.createComponent(factory);

    // 遍历属性，批量设置到子组件实例
    Object.entries(this.parentProps).forEach(([key, value]) => {
      if (key in componentRef.instance) {
        componentRef.instance[key] = value;
      }
    });
  }
}

子组件代码 #

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

@Component({
  selector: 'app-dynamic-child',
  template: `
    <h3>{{title}}</h3>
    <p>{{description}}</p>
    <span>总数: {{itemCount}}</span>
  `
})
export class DynamicChildComponent {
  @Input() title!: string;
  @Input() description!: string;
  @Input() itemCount!: number;
}

2. 传递完整属性对象（适用于属性不固定的场景） #

如果子组件的属性无法预定义，可以直接传递整个属性对象，子组件通过单个@Input()接收：

子组件代码 #

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

@Component({
  selector: 'app-dynamic-child',
  template: `
    <h3>{{allProps.title}}</h3>
    <p>{{allProps.description}}</p>
    <span>{{allProps.extraInfo}}</span>
  `
})
export class DynamicChildComponent {
  @Input() allProps!: Record<string, any>;
}

父组件中传递属性 #

在创建动态组件时，直接把整个属性对象赋值给子组件的allProps：

// 父组件renderDynamicComponent方法中
componentRef.instance.allProps = this.parentProps;

3. 依赖注入传递属性集合 #

如果需要在子组件的多个层级中共享这些属性，或者不想通过输入属性传递，可以用自定义注入令牌：

父组件代码 #

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit, Injector, InjectionToken } from '@angular/core';
import { DynamicChildComponent } from './dynamic-child.component';

// 定义注入令牌
export const PARENT_PROPS = new InjectionToken<Record<string, any>>('PARENT_PROPS');

@Component({
  selector: 'app-parent',
  template: `<div #dynamicContainer></div>`
})
export class ParentComponent implements OnInit {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
  
  parentProps = {
    title: '依赖注入传参',
    data: [1, 2, 3]
  };

  constructor(private resolver: ComponentFactoryResolver, private injector: Injector) {}

  ngOnInit() {
    this.renderDynamicComponent();
  }

  renderDynamicComponent() {
    this.container.clear();
    const factory = this.resolver.resolveComponentFactory(DynamicChildComponent);
    
    // 创建包含属性的自定义注入器
    const customInjector = Injector.create({
      providers: [{ provide: PARENT_PROPS, useValue: this.parentProps }],
      parent: this.injector
    });

    // 使用自定义注入器创建组件
    const componentRef = this.container.createComponent(factory, { injector: customInjector });
  }
}

子组件代码 #

import { Component, Inject } from '@angular/core';
import { PARENT_PROPS } from '../parent.component';

@Component({
  selector: 'app-dynamic-child',
  template: `
    <h3>{{parentProps.title}}</h3>
    <ul>
      <li *ngFor="let num of parentProps.data">{{num}}</li>
    </ul>
  `
})
export class DynamicChildComponent {
  constructor(@Inject(PARENT_PROPS) public parentProps: Record<string, any>) {}
}

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