Angular Компонент использует другой компонент, который использует импортируемый модуль - организация?

Question

Я довольно новичок в Angular, и не могу понять, как правильно организовать мой код.

У меня есть страница с именем BudgetComponent, которая принадлежит BudgetModule. BudgetComponent отображает список аккордеонных компонентов AccordionItemComponents. Я хочу использовать эти Аккордеонные Компоненты в другом месте, поэтому они являются их собственным классом компонентов.

У AccordionItemComponent есть изображение, которое при нажатии открывает MatDialogue. MatDialogue содержит ссылку на импортированный модуль ngx-extended-pdf-viewer (из онлайн-библиотеки).

Я создал AccordionItemModule (который мне не нужен / правильный) для размещения соответствующего компонента, но тогда я не уверен, как сделать экземпляры этого в моем ngFor.

Я действительно изо всех сил пытаюсь выяснить, какие компоненты должны принадлежать каким модулям, и как заставить все это работать, чтобы другой компонент (со своим собственным модулем, таким как Budget (ie Schedule)), также мог ссылаться на AccordionItems. Я не уверен, что мне не хватает необходимой маршрутизации или экспорта logi c, или что ...

Я включил диаграмму, чтобы убедиться, что предполагаемое использование ясно.

Спасибо за любую помощь.

Answer 1

Вы идете в правильном направлении.

Во-первых, экспортируйте AccordionItemComponent как этот exports: [AccordionItemComponent] в свой AccordionItemModule класс.

Во-вторых, добавьте AccordionItemModule в imports в вашем классе BudgetModule и ScheduleModule, так как вы будете sh использовать там компонент AccordionItemComponent.

В-третьих, передать данные из компонента Budget и Schedule в Accordion компонент, добавив его в файл html следующим образом:

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

В-четвертых, получите данные в AccordionItemComponent, используя @Input() data; в качестве переменной класса. Теперь у вас будет доступ к данным, которые передаются из компонентов Budget и Schedule.

Наконец, l oop your *ngFor, чтобы получить желаемый результат в accordion-item.component.html.

Чтобы использовать компонент Modal, добавьте модуль Modal к imports и добавьте компонент Modal как entryComponents: [ModalComponent] к вашему Accordion модулю.

Наконец, ваш Modal модуль должен import требуемый модуль для ngx-pdf-viewer.