Angular Material Tabs 不适用于包装器组件

Posted 2023-03-13

【中文标题】Angular Material Tabs 不适用于包装器组件

【英文标题】：Angular Material Tabs not working with wrapper component

【发布时间】：2018-07-28 04:26:33

【问题描述】：

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

【问题讨论】：

首先，custom-tab 中mat-tab 组件上的标签输入应该带有方括号以进行绑定。

@Edric 很公平，尽管不幸的是它不会让我更接近解决我的问题。 ;)

您是否已经找到解决此问题的方法？谢谢。

@dtodt 是的，只需检查更新后的StackBlitz。

@RobertGruner 如果你能发布 StackBlitz 的运行代码作为答案，那就太棒了。

【参考方案1】：

material 已更改 var 名称，所以在解决方案中

标签 -> _allTabs

tabGroup -> _tabBodyWrapper

【讨论】：

你是英雄。啤酒在我身上

【参考方案2】：

我认为您遇到的问题与此 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问题中描述的方式以编程方式覆盖它。

【讨论】：

非常感谢您的链接！猜猜我们很快就会尝试这个建议。

真的可以这样工作。非常感谢@dariusz-ostolski！我更新了StackBlitz 来展示它是如何工作的。诀窍是 CustomTabsComponent 中的 AfterViewInit 部分。不知道这是否是最优雅的解决方案，但它现在有效。