Angular - когда мне следует использовать дочерние компоненты вместо передачи @input

Question

Моя команда и я в настоящее время создаем библиотеку компонентов с использованием Angular (v8.x). Мы хотим установить некоторые домашние правила и сделать интерфейсы наших компонентов интуитивно понятными (т. Е. Согласованное именование входных данных и использование шаблонов).

Мы обнаружили две точки зрения на использование @Inputs и вложенных компонентов.

Наша делема может быть описана с помощью следующих (разбавленных) примеров

Пример компонента 1:

<our-component [hideChild]="childHidden"></our-component>

Пример компонента 2:

<our-component>
  <our-child-component></our-child-component>
</our-component>

В примере 1 компонент имеет @Input, который показывает и скрывает дочерний компонент, жестко закодированный в шаблоне.

В примере 2 компонент добавлен (или нет) как дочерний (через ngContent).

Я пытаюсь найти диссертацию, которая диктует, когда использовать один шаблон вместо другого. Я так понимаю, может и не быть. В настоящее время я считаю, что если у вашего компонента n дочерних элементов или n типов дочерних элементов, используйте вложение компонентов. Если у компонента будет только один тип дочерних элементов, используйте входные данные и включите дочерний компонент в шаблон родительских компонентов.

Я проверил руководство по стилю angular, но не могу найти ничего конкретного для этой проблемы.

Кто-нибудь знает какие-либо ресурсы или имел опыт проведения этого различия? Я хотел бы услышать, как и почему вы так или иначе реализовали это.

---

Изменить: в частности, я хотел бы получить окончания следующих утверждений:

"Использовать @Inputs поверх вложенных компонентов, когда..." и"Использовать вложенные компоненты поверх @Inputs, когда..."

---

Изменить 2: Цените, что я не могу правильно выражаться. С нашей библиотекой компонентов, среди других компонентов, мы обертываем существующие компоненты углового материала, такие какmat-input. У нас есть компонент, который включает в себя компоненты mat-form-field, mat-hint и mat-input в нашем шаблоне. Наш компонент выглядит так:

<our-input
 [hideAssistiveText]="hideAssistiveText"
 [type]="inputType"
 [hint]="hint"
 [label]="label"
 [control]="control"
 ... and so on
 ></our-input>

Существуют варианты использования этого компонента, в которых мы не хотим показывать подсказку. Итак, пока вы указываете строку подсказки,our-input покажет our-hint компонент (который вложен в шаблон).

Но с таким же успехом я мог бы реализовать этот компонент, чтобы он работал так:

<our-input
 [hideAssistiveText]="hideAssistiveText"
 [type]="inputType"
 [label]="label"
 [control]="control"
 ... and so on
 >
   <our-hint label="{{hint}}"></our-hint>
</our-input>

И разработчик мог просто опустить our-hint компонент в целом, чтобы добиться того же.

То, что мне нужно, - это некоторые четкие ресурсы по передовой практике о том, когда использовать один метод по сравнению с другим (если есть) или причины, по которым вы приняли метод.

Answer 1

Я чувствую, что здесь есть две точки зрения. Один из них - это то, как ваши компоненты организуются для структурирования вашего приложения и как вы управляете переключением их видимости. Подумайте, должно быть четкое разделение при обращении к двум.

Answer 2

Из моего опыта есть несколько случаев, когда я рекомендовал бы пример компонент 1 над примером компонентой 2.

1. Есть и другие входы и выходы, которые родитель передаст дочернему элементу (или они могут появиться в какой-то момент в будущем).
2. Как вы упомянули в своем сообщении, когда у родителя всегда будет один и тот же дочерний компонент, и он не предназначен для поддержки других типов детей.

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

В остальном жестких правил нет, и это в основном зависит от личных предпочтений. В любом случае, всегда думайте, как вы можете масштабировать и использовать компонент в будущем.