Должен ли я передать компоненту все @inputs () отдельно или просто передать ID / объект?

Question

Я не уверен, какой способ лучше (или просто лучше) практиковать в написании Angular-кода.Поскольку я хочу улучшить качество своего кода, не могли бы вы дать мне несколько советов?

Например, пользовательский список пользовательских элементов:

<custom-list>
  <custom-item
    *ngFor="let obj of objects"
  ></custom-item>
</custom-list>

Должен ли я справиться со всеми сложностями внутриcustom-item вот так

<custom-list>
  <custom-item
    *ngFor="let obj of objects"
    [obj]="obj"
  ></custom-item>
</custom-list>

где custom-item сопоставляет объект с меткой, цветом, макетом и т. Д. или распространяет его на многие @inputs() вот так?

<custom-list>
  <custom-item
    *ngFor="let obj of objects"
    [id]="obj.id"
    [label]="obj.label"
    [icon]="obj.icon"
    [color]="obj.color"
    [someProperty]="magicService.someProperty"
  ></custom-item>
</custom-list>

Редактировать: Или передать только ID-свойство и получить все соответствующие данные внутри каждого custom-item из службы хранения?

Я не уверен,должны поддерживать интерфейсы тонкими или мои компоненты простыми и глупыми.За любые советы по передовому опыту я был бы очень признателен.

Также имеет ли значение, если некоторые относящиеся к рендерингу свойства связаны с предметами или со списком (например, границы между метками и т. Д.)?

Answer 1

Если у вас уже есть данные в родительском компоненте, вы должны передать объект дочернему элементу, не нужно снова вызывать API.

Answer 2

Вы обязательно должны передать весь объект вашему компоненту, потому что:

• Одна из основных идей, лежащих в основе программирования на основе компонентов, - сделать компоненты многократно используемыми. Представьте, что вы используете этот компонент в нескольких местах, и вам следует добавить новое свойство. Вы должны пройти через все места в вашем коде и убедиться, что новый параметр будет предоставлен как Input во всех возможных местах.
• Если «дочерний» компонент используется только для отображения данных и имеет некоторые простые действия пользователя (например, нажатие кнопки и т. Д.) - постарайтесь сделать его как можно более «тупым». Вы добавите больше сложности своему коду, добавив службу зависимостей, из которой вы сможете получать данные для вашего элемента.

Кроме того, вы можете использовать более подробные имена для ваших входов, например, item (или что бы вы ни выбрали, связанные с контекстом компонента) гораздо лучше, чем просто obj.