將巨大的 object 從父組件傳遞給子組件

Question

我正在重構一個代碼，我想將幾個屬性傳遞給一個可重用的子組件——但不使用太多輸入（這是當前的問題）。

問題是，即使使用我目前的方法，html 代碼看起來很破舊，因為傳遞了一個巨大的 object（下面只是一個例子。object）可以更大，因為有很多屬性可以傳遞給孩子。

我的代碼如下所示：

<app-parent>
<ul>
  <li
    *ngFor="let prop of props"
    <app-child
    [childProps]="{'template':'parent1', 'iconName':prop.type | propIcon, 'showIcon':true}"
  >
    </app-child>
  </li>
</ul>
</app-parent>

是否有遵循最佳實踐並同時使代碼更具可讀性的替代方法？

Answer 1

在 component.ts 創建一個新的映射數組：

let mappedProps: ChildProp[] = props.map((prop) => ({
   ...prop, // Make sure all values from the old props array are here as well
   template: 'parent1',
   showIcon: true
}));

然后在component.html中：

<app-parent>
<ul>
  <li
    *ngFor="let prop of mappedProps"
    <app-child [childProp]="prop">
    </app-child>
  </li>
</ul>
</app-parent>

請注意，我將子輸入值更改為childProp ，因為您只在下面傳遞了一個 object，而不是數組