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

Question

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

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

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

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

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

我附上了一张图表，以确保明确预期用途。

感谢您的帮助。

Answer 1

你的方向是正确的。

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

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

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

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

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

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

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

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