Angular组件使用另一个组件，该组件使用导入的模块-组织？

Question

我对Angular很陌生，似乎无法弄清楚如何正确组织我的代码。

我有一个名为BudgetComponent的页面，它属于BudgetModule。 BudgetComponent显示AccordionItemComponents的手风琴列表。我想在其他地方使用这些“手风琴组件”，这就是为什么它们是自己的组件类。

AccordionItemComponent具有一个img，单击该img可以打开MatDialogue。 MatDialogue包含对导入模块ngx-extended-pdf-viewer（来自在线库）的引用。

我创建了一个AccordionItemModule（我不是必需/正确的）来容纳相应的组件，但是我不确定如何在ngFor中创建它的实例。

我真的很难弄清楚哪个组件应该属于哪个模块，以及如何使所有这些工作正常进行，以便另一个组件（具有自己的模块，例如Budget（即Schedule），也可以引用AccordionItems。我不确定是否缺少必要的路由或导出逻辑，或者什么...

我提供了一个图表，以确保预期用途明确。

感谢您的帮助。

Answer 1

您在这里朝正确的方向前进。

首先，在您的AccordionItemComponent类中像这样exports: [AccordionItemComponent]导出AccordionItemModule。

第二，在AccordionItemModule和imports类中将BudgetModule添加到ScheduleModule，因为您希望在其中使用AccordionItemComponent组件。

第三，按如下所示将数据从Budget和Schedule组件传递到Accordion组件，方法是将其添加到html文件中：

<app-accordion-item [data]="accordianData"></app-accordion-item>

第四，使用AccordionItemComponent作为类变量来获取@Input() data;中的数据。现在，您将可以访问从Budget和Schedule组件传递的数据。

最后，将*ngFor循环以在accordion-item.component.html中获得所需的结果。

要使用Modal组件，请将Modal模块添加到imports并将Modal组件作为entryComponents: [ModalComponent]添加到Accordion模块。

最后，您的Modal模块应import为ngx-pdf-viewer所需的模块。