Question

我们正在开发一个企业组件库，它应该提供Material Designed Angular Components。所以这个库的用户不应该使用例如角度材料直接但包括一些组件，如＆＃34; 自定义标签＆＃34;。

使用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/material2/blob/master/src/lib/tabs/tab.ts

所以我认为唯一的解决方案是以编程方式覆盖它在primeng问题中描述的方式。

Answer 2

材料已更改var名称，因此在解决方案中

标签-> _allTabs

tabGroup-> _tabBodyWrapper

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

2 个答案: