Вкладки Angular Material не работают с компонентом оболочки

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

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

Использование очень похоже на Angular Material API:

<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, где вы можете увидеть проблему в действии.


angular angular-material2 angular-components wrapper angular2-ngcontent
person Robert Gruner    schedule 17.02.2018    source источник
comment
Для начала, метка, введенная на вашем mat-tab компоненте в custom-tab, должна иметь квадратные скобки для привязки.   -  person Edric    schedule 17.02.2018
comment
@Edric Достаточно справедливо, хотя, к сожалению, это не приблизит меня к решению моей проблемы. ;)   -  person Robert Gruner    schedule 19.02.2018
comment
Вы уже нашли решение этой проблемы? Спасибо.   -  person DTodt    schedule 08.06.2018
comment
@dtodt Да, просто проверьте обновленный StackBlitz.   -  person Robert Gruner    schedule 11.06.2018
comment
@RobertGruner Было бы здорово, если бы вы опубликовали работающий код из StackBlitz в качестве ответа.   -  person sloth    schedule 25.10.2019

Ответы (2)


arrow_upward
5
arrow_downward

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

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

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

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

person Dariusz Ostolski    schedule 08.03.2018
comment
Большое спасибо за ссылку! Думаю, мы попробуем это предложение в ближайшее время. - person Robert Gruner; 13.03.2018
comment
На самом деле это так работает. Большое спасибо @ dariusz-ostolski! Я обновил StackBlitz, чтобы показать, как это работает. Уловка - это часть AfterViewInit в CustomTabsComponent. Не знаю, самое ли это элегантное решение, но пока оно работает. - person Robert Gruner; 11.06.2018

arrow_upward
6
arrow_downward

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

вкладки -> _allTabs

tabGroup -> _tabBodyWrapper

person Phil Baird    schedule 28.04.2020
comment
Ты герой. Пиво на мне - person raphisama; 12.03.2021