Angular中如何将整个对象从父组件传递到子组件？

Angular没有像React那样原生支持...对象展开的属性传递语法，但有两种实用的替代方案可以实现批量传递属性的需求：

方案一：子组件接收完整对象（推荐） #

将子组件的多个零散@Input合并为一个接收完整对象的输入属性，父组件直接传递整个对象即可，这是最简洁、易维护的方案。

子组件代码： #

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

@Component({
  selector: 'app-demo',
  template: `
    <p>
      {{user.name}}-{{user.age}}
    </p>
  `
})
export class DemoComponent {
  @Input() user: { name: string; age: number } = { name: '', age: 0 };
}

父组件代码： #

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

@Component({
  selector: 'app-use',
  template: `
    <p>use works!</p>
    <app-demo [user]="demoInject"></app-demo>
  `,
  styleUrls: ['./use.component.css']
})
export class UseComponent {
  demoInject = {
    name: 'tom',
    age: 20
  };
}

方案二：动态绑定属性（无需修改子组件） #

如果不能修改子组件的现有@Input定义，可以通过遍历对象键值对的方式，动态为子组件的属性赋值。

父组件代码： #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { DemoComponent } from './demo.component';

@Component({
  selector: 'app-use',
  template: `
    <p>use works!</p>
    <app-demo #demoComp></app-demo>
  `,
  styleUrls: ['./use.component.css']
})
export class UseComponent implements AfterViewInit {
  @ViewChild('demoComp') demoComp!: DemoComponent;
  demoInject = { name: 'tom', age: 20 };

  ngAfterViewInit(): void {
    // 遍历对象，匹配子组件的属性并赋值
    Object.entries(this.demoInject).forEach(([key, value]) => {
      if (Object.prototype.hasOwnProperty.call(this.demoComp, key)) {
        (this.demoComp as Record<string, unknown>)[key] = value;
      }
    });
  }
}

这种方式适合需保留子组件原有@Input结构的场景，但可读性和维护性不如方案一，仅作为特殊场景的备选。

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