Как выбрать контент из внутренних потомков в ng-content

У меня есть компонент под названием tab у которого есть <ng-content select="[tabItem]"></ng-content>

Иногда tabItem находится внутри других дочерних компонентов. Моя проблема заключается в том, что Angular выбирает контент из прямых дочерних элементов, а не из внутренних дочерних элементов (app-my-tab), есть ли способ сделать это?

app.component.html

<app-tabs>
    <div tabItem>
        Tab 1
    </div>
    <div tabItem>
        Tab 2
    </div>
    <app-my-tab></app-my-tab>
</app-tabs>

мой-tab.component.html

<div tabItem> 
  My Tab
</div>
<div>
  Other content
</div>

Смотрите этот стек

1 ответ

Там нет решения для глубокого отбора. Я думаю, это логично, потому что:

  1. понять и реальный код легко
  2. легко отлаживать.

Если вы действительно хотите это сделать, используйте * ngIf в app-my-tab.

Использовать *ngIF :

  1. Все элементы в app-tabs должен иметь tabItem атрибут
  2. отправить ваше условие, чтобы показать / скрыть какой-либо другой элемент в app-my-tab составная часть. а также app-my-tab получить это как @Input() имущество
  3. в app-my-tab использование HTML *ngIf показать или скрыть какой-то элемент

Пример: https://stackblitz.com/edit/deep-ng-content-2gyttv?file=src/app/app.component.html

Другие вопросы по тегам