将巨大的 object 从父组件传递给子组件

Question

I am refactoring a code where I want to pass down several properties to a reusable child component -- but without using too many inputs (which is the current problem).

The problem is that, even with my current approach, the html code looks shabby because of passing down a huge object (below is just an example. The object can be bigger since there are many properties to be passed to child).

My code looks something like below:

<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>

Is there an alternative approach that follows best practices and at the same time makes the code more readable?

Answer 1

In component.ts create a new mapped array:

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

Afterwards in component.html:

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

Notice I changed the child input value to childProp since you are only passing one object down there, not an array