我们正在开发一个公司组件库,它应该提供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
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问题中描述的方式.
