Angular组件中如何为输入对象的指定属性单独赋值？

问题背景 #

我有一个Angular独立组件SchemeDetailsComponent，其中包含一个对象类型的输入属性padding：

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

@Component({
  selector: 'scheme-details',
  standalone: true,
  imports: [NgIf],
  templateUrl: './scheme-details.component.html',
  styleUrls: ['./scheme-details.component.scss']
})
export class SchemeDetailsComponent {
  @Input() icon: string | undefined = undefined
  @Input() name: string = ""
  @Input() tags: string[] = []
  @Input() padding: { top: string; bottom: string } = { top: "0px", bottom: "0px" }
}

我知道原生HTML元素可以通过[style.paddingTop]单独设置样式：

<div [style.paddingTop]="'10px'"> Content </div>

于是想类比这种写法，在组件上直接绑定对象输入属性的子属性：

<scheme-details [icon]="icon" [name]="name" [tags]="[]" [padding.top]="'10px'" />

但尝试后遇到错误提示：

无法绑定到'padding.top'，因为它不是'scheme-details'的已知属性

为什么这种写法不可行？ #

Angular的输入属性绑定仅识别组件类中通过@Input()直接声明的属性。padding是一个完整的输入属性，而padding.top并不是单独声明的输入，所以框架无法识别这种绑定语法。

可行的替代方案 #

方案1：传递完整的padding对象 #

直接构造包含需要修改属性的完整对象进行绑定：

<scheme-details 
  [icon]="icon" 
  [name]="name" 
  [tags]="[]" 
  [padding]="{ top: '10px', bottom: '0px' }" 
/>

如果需要保留原有bottom属性的值，可以在父组件中合并现有值：

// 父组件代码
// 假设已有默认的padding值
defaultPadding = { top: "0px", bottom: "20px" };
// 构造新的padding对象，仅修改top
updatedPadding = { ...this.defaultPadding, top: '10px' };

模板中绑定更新后的对象：

<scheme-details 
  [icon]="icon" 
  [name]="name" 
  [tags]="[]" 
  [padding]="updatedPadding" 
/>

方案2：拆分为独立的输入属性 #

将padding拆分为两个单独的@Input()属性，更贴近原生样式绑定的写法：

// 子组件修改后代码
@Component({
  selector: 'scheme-details',
  standalone: true,
  imports: [NgIf],
  templateUrl: './scheme-details.component.html',
  styleUrls: ['./scheme-details.component.scss']
})
export class SchemeDetailsComponent {
  @Input() icon: string | undefined = undefined
  @Input() name: string = ""
  @Input() tags: string[] = []
  @Input() paddingTop: string = "0px"
  @Input() paddingBottom: string = "0px"
}

模板中直接绑定独立属性：

<scheme-details 
  [icon]="icon" 
  [name]="name" 
  [tags]="[]" 
  [paddingTop]="'10px'" 
/>

方案3：使用setter实现部分更新 #

给padding输入属性添加setter，允许父组件传递部分对象并合并到现有值：

// 子组件修改后代码
@Component({
  selector: 'scheme-details',
  standalone: true,
  imports: [NgIf],
  templateUrl: './scheme-details.component.html',
  styleUrls: ['./scheme-details.component.scss']
})
export class SchemeDetailsComponent {
  @Input() icon: string | undefined = undefined
  @Input() name: string = ""
  @Input() tags: string[] = []
  
  private _padding = { top: "0px", bottom: "0px" };

  @Input() set padding(value: Partial<{ top: string; bottom: string }>) {
    this._padding = { ...this._padding, ...value };
  }

  get padding() {
    return this._padding;
  }
}

父组件中只需传递需要修改的部分属性：

<scheme-details 
  [icon]="icon" 
  [name]="name" 
  [tags]="[]" 
  [padding]="{ top: '10px' }" 
/>

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