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

发布时间：2020-12-17 18:11:09 所属栏目：安全来源：网络整理

导读：我们正在开发一个公司组件库,它应该提供Material Designed Angular Components.所以这个库的用户不应该使用例如Angular Material直接,但包括一些组件,如“custom-tabs”. 使用MatTabModule的组件直接像魅力一样工作,而在使用我们的自定义组件时,投影内容不会

我们正在开发一个公司组件库,它应该提供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,您可以在其中查看问题.

解决方法

我认为您遇到的问题与此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问题中描述的方式.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!