Angular Material 选项卡不适用于包装器组件

Question

我们正在开发一个公司组件库，它应该提供 Material 设计的 Angular 组件。所以这个库的用户不应该使用例如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

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

Answer 2

material 更改了 var 名称，因此在解决方案中

标签 -> _allTabs

tabGroup -> _tabBodyWrapper

Angular Material 选项卡不适用于包装器组件

Angular Material Tabs not working with wrapper component

wrapper

angular-material2

angular2-ngcontent

angular-components

angular