Angular Material选项卡不适用于包装器组件

问题描述：

我们正在开发公司组件库，该库应提供材料设计角组件".因此，该库的用户不应使用例如直接使用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/material2/blob/master/src/lib/tabs/tab.ts

You can see that mat-tab uses @ContentChild: https://github.com/angular/material2/blob/master/src/lib/tabs/tab.ts

因此，我认为唯一的解决方案是以编程方式以原始内容中描述的方式对其进行覆盖.

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

Angular Material选项卡不适用于包装器组件

相关推荐