Я создаю компонент вкладки в Angular и передаю вкладки следующим образом:
<app-tabs>
<app-tab label="first component">
<app-my-first-component></app-my-first-component>
</app-tab>
<app-tab label="second component">
<app-my-second-component></app-my-second-component>
</app-tab>
</app-tabs>
Компоненты вкладок создают интерактивные заголовки и отображают / скрывают app-tab
s, так что я могу показать компонент, соответствующий метке, по которой щелкнули.
Моя проблема заключается в следующем: так как мое приложение имеет два компонента в своем шаблоне, компоненты создаются в верхний app
уровень. Показать / скрыть работает, но я хочу, чтобы компоненты запускали OnInit и OnDestroy (и создавались / уничтожались тоже) каждый раз при выборе вкладки.
Если я хочу сохранить макет, показанный выше, как я могу каким-то образом передать два пользовательских компонента в качестве шаблонов, чтобы они могли быть созданы / уничтожены компонентом app-tab
или app-tabs
? Мне бы очень хотелось решение, где мне не нужно было бы вручную оборачивать пользовательские компоненты в ng-template
в приведенном выше примере - но это каким-то образом стало задачей компонента app-tab
.