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

Question

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

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

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

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

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

我已经包含了一个图表，以确保预期的用途是明确的。

谢谢你的帮助。

标签： angularangular-componentsangular-modulefile-structure

Answer 1

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

首先，在你的课堂上AccordionItemComponent像这样导出。exports: [AccordionItemComponent]AccordionItemModule

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

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

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