10

我们正在开发一个企业组件库，它应该提供 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，您可以在其中看到问题的实际情况。

4

2 回答 2

7

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

标签 -> _allTabs

tabGroup -> _tabBodyWrapper

于 2020-04-28T19:26:42.370 回答
5

我认为您遇到的问题与此 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问题中描述的那样。

于 2018-03-08T11:39:37.907 回答