Angular Material选项卡不与包装器组件一起使用

Question

我们正在开发一个企业组件库,它应该提供Material Designed Angular Components.所以这个库的用户不应该直接使用例如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,您可以在其中查看问题.

Answer 1

材料改变了var名称，所以在解决方案中

标签 -> _allTabs

tabGroup -> _tabBodyWrapper

Answer 2

我认为您遇到的问题与此 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 issue中描述的方式以编程方式覆盖它。