Вкладки угловых материалов не работают с компонентом обертки

Мы разрабатываем библиотеку корпоративных компонентов, которая должна обеспечивать угловые компоненты, предназначенные для материалов. Таким образом, пользователи этой библиотеки не должны использовать, например, Angular Material напрямую, а включают какой-либо компонент, такой как "пользовательские вкладки".

Использование компонентов MatTabModule напрямую работает как чудо, тогда как при использовании наших пользовательских компонентов проецируемый контент не отображается.

Использование выглядит очень похоже на API Angular Material:

<custom-tabs>
  <custom-tab [label]="labelA">Content A</custom-tab>
  <custom-tab [label]="labelB">Content B</custom-tab>
  <custom-tab [label]="labelC">Content C</custom-tab>
</custom-tabs>

Пользовательские компоненты пытаются проецировать содержимое следующим образом:

<!-- custom-tabs template -->
<mat-tab-group>
  <ng-content></ng-content>
</mat-tab-group>

<!-- custom-tab template -->
<mat-tab [label]="label">
  <ng-content></ng-content>
</mat-tab>

У кого-нибудь есть идеи, как мы можем заставить его работать?

Я предоставил StackBlitz, где вы можете увидеть проблему в действии.

Источник

1 ответ

Решение

Я думаю, что у вас есть проблема, описанная в этом выпуске github: https://github.com/primefaces/primeng/issues/1215

В основном проблема здесь в том, что ng-content не предоставляет @ContentChild при пересечении границ компонента.

Вы можете видеть, что mat-tab использует @ContentChild: https://github.com/angular/material2/blob/master/src/lib/tabs/tab.ts

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

Источник

Материал изменил имена переменных, поэтому в решении

вкладки -> _allTabs

tabGroup -> _tabBodyWrapper

Источник
Другие вопросы по тегам