Angular组件间能否直接传递整个对象作为@Input属性？

将对象的每个属性单独作为子组件的@Input传递是可行的，但由于传递的对象与子组件所需的类型完全一致，这种写法会显得冗余。以下是原实现代码：

原实现代码 #

父组件TS #

export class SingleCollectionPage{
    @Input() id = '' 
    collection: Collection = {id: '1', name: 'Loading...'}
    constructor(private collectionService: CollectionService) {
    }
    ngOnInit(){
        console.log('input', this.id)
        this.collectionService.getCollectionByID(this.id, true).then(c => {
            this.collection = c;     
    })
}
}
export interface Collection {
    id: string,
    name: string,
    mnemonicCount?: number,
    mnemonics?: Mnemonic[]
}

父组件模板 #

<app-mnemonicCard *ngFor="let m of collection.mnemonics"
  [name]="m.name"
  [views]="m.views"
  ...
></app-mnemonicCard>

子组件TS #

export class MnemonicCard {
    @Input() name: string = '';
    @Input() views: number = 0;
    ...
}

export interface Mnemonic{
    link: string
    name: string
    stars: number
    views: number
    globalViewRank: number
    globalStarRank: number
    collectionViewRank?: number
    collectionStarRank?: number
}

我希望改为直接传递整个对象，请问是否可以采用如下实现方式？

改进方案 #

子组件TS #

export class MnemonicCard {
    @Input() m: Mnemonic
}

父组件模板 #

<app-mnemonicCard *ngFor="let m of collection.mnemonics"></app-mnemonicCard>

回答 #

完全可以采用这种实现方式，这是Angular开发中非常常见的优化手段，能有效简化模板代码，让组件间的数据传递逻辑更清晰。

需要注意几个细节：

• 确保子组件中正确引入了Mnemonic接口，避免出现类型未定义的编译错误
• 如果子组件仅依赖Mnemonic对象的部分属性，传递整个对象虽然可行，但后续若对象结构变更，可能会引入不必要的依赖；不过如果该子组件本身就是为展示Mnemonic对象设计的，直接传递整个对象是更合理的选择
• 变更检测方面：父组件中mnemonics数组内的对象属性更新时，Angular的变更检测机制能正常感知并更新子组件；若替换整个对象引用，同样会触发子组件的更新，这和单独传递属性的行为一致

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