角度材质选项卡不适用于包装器组件 [英] Angular Material Tabs not working with wrapper component

问题描述

我们正在开发一个公司组件库，它应该提供材料设计的角度组件.所以这个库的用户不应该使用例如Angular Material 直接包含一些组件，例如自定义标签".

We are developing a corporate component library which should provide Material Designed Angular Components. So the users of this library are not supposed to use e.g. Angular Material directly but rather include some component like "custom-tabs".

直接使用 MatTabModule 的组件就像一个魅力，而使用我们的自定义组件时，投影内容不会显示.

Using the components of MatTabModule directly works like a charm, whereas when using our custom components the projected content does not show up.

用法看起来与 Angular Material API 非常相似:

Usage looks very similar to the 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>

自定义组件尝试按如下方式投影内容:

The custom components try to project the content as follows:

<!-- 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>

有人知道我们如何让它工作吗?

Does anyone have an idea how we can get it working?

我提供了一个StackBlitz，您可以在其中查看实际问题.

I provided a StackBlitz where you can see the problem in action.

推荐答案

我认为您遇到的问题与此 github 问题中描述的相同:https://github.com/primefaces/primeng/issues/1215

I think the issue you have is the same described in this github issue: https://github.com/primefaces/primeng/issues/1215

基本上这里的问题是 ng-content 在跨越组件边界时不提供 @ContentChild.

Basically the problem here is that ng-content does not provide @ContentChild when crossing component boundaries.

可以看到 mat-tab 使用了@ContentChild:https://github.com/angular/components/blob/master/src/material/tabs/tab.ts#L56

You can see that mat-tab uses @ContentChild: https://github.com/angular/components/blob/master/src/material/tabs/tab.ts#L56

所以我认为唯一的解决方案是按照primeng issue中描述的方式以编程方式覆盖它.

So I think the only solution is to override it programmatically the way it is described in primeng issue.

这篇关于角度材质选项卡不适用于包装器组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！