Angular中如何将对象键值对作为组件独立输入参数传递？

针对你的场景，有两种简洁且符合组件设计的方案：

方案一：直接使用安全导航操作符绑定单个属性 #

在父组件模板中，通过Angular的**安全导航操作符（?.）**逐个绑定对象的属性，既保证了独立输入的要求，又能处理args缺少部分键值对的情况：

<app-test-component
  [input1]="args?.input1"
  [input2]="args?.input2"
  [input3]="args?.input3"
></app-test-component>

• 优点：直观易懂，完全贴合子组件的独立输入设计，无需额外修改父组件TS逻辑，安全导航操作符能避免args为undefined或缺少属性时的报错。
• 适用场景：输入属性数量较少（如你的场景只有3个），直接写模板绑定更高效。

方案二：解构对象后绑定 #

如果觉得模板里重复写args?.繁琐，可以在父组件TS中先解构args对象，再绑定解构后的变量：

父组件TS代码： #

// 解构时处理args为undefined的情况，避免报错
const { input1, input2, input3 } = args || {};

父组件模板代码： #

<app-test-component
  [input1]="input1"
  [input2]="input2"
  [input3]="input3"
></app-test-component>

• 优点：模板代码更简洁，解构操作集中在TS逻辑中，便于统一处理默认值（如果需要的话，比如input1 = args?.input1 || 'default'）。
• 适用场景：输入属性较多，或者需要给某些属性设置默认值时更方便。

方案选型建议 #

如果你的子组件输入属性数量少（3个及以内），优先选方案一；如果属性数量多，或者需要统一处理默认值，方案二更合适。两种方案都不需要修改子组件代码，完全符合你“不让testComponent直接接收整个对象作为输入”的要求。

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