Angular - How to reuse data in manually nested components

Question

I have two Angular components, checklist-page and checklist . checklist-page downloads the data from the backend

I would like to use the checklist component multiple times inside the checklist-page component.

I'd like to use the downloaded data of checklist-page in checklist components.

The twist is, I can't choose the basic parent-child component nesting way, because I would like to customly parameterize each checklist instances this way:

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

So, in short, I don't know exactly what is the content of the checklist-page template, it can be vary.

How can I pass the data from checklist-page to checklist in this scenario?

Answer 1

您可以从此链接使用一种方法。我更喜欢一种服务https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

Answer 2

您可以使用动态组件加载器https://angular.io/guide/dynamic-component-loader 。