Angular - Как повторно использовать данные во вложенных вручную компонентах

Question

У меня есть два угловых компонента, checklist-page и checklist. checklist-page загружает данные из бэкэнда

Я бы хотел использовать компонент checklist несколько раз внутри компонента checklist-page.

Я хотел бы использовать загруженные данные checklist-page в checklist компонентах.

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

<checklist-page [type]='locations'>
   <checklist [checklistData]="parentComponentData" [filter]='visited'>
   <checklist [checklistData]="parentComponentData" [filter]='remaining'>
   <checklist [checklistData]="parentComponentData" [filter]='visited' [userId]=123>
   <checklist [checklistData]="parentComponentData" [filter]='visited' [userId]=234>
   <checklist [checklistData]="parentComponentData" [filter]='remaining' [userId]=456>
   <checklist [checklistData]="parentComponentData" [filter]='remaining' [userId]=456>
   .
   .
   .
</checklist-page>

Итак, вкратце, я не знаю точно, что является содержимым шаблона checklist-page, он может быть различным.

Как я могу передать данные от checklist-page до checklist в этом сценарии?

Answer 1

Вы можете использовать динамический загрузчик компонентов https://angular.io/guide/dynamic-component-loader.

Answer 2

Вы можете использовать один из подходов по этой ссылке. Я предпочитаю сервисный https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/