javascript - 如何使用 Angular Materials 选项卡制作自定义选项卡？

Question

我想使用 Angular Material 库并使用一些自定义设计构建我自己的库。但是拆分 Material 组件时会遇到一些问题。我认为问题出在影子 DOM 上。这是我想要实现的代码。

代码

custom-tabs-group.html -parent

<div class="custom-tabs">
  <mat-tab-group disableRipple>
    <ng-content></ng-content>
  </mat-tab-group>
</div>

custom-tabs.html -child

<custom-tabs-group [tabContent]="tabContent">
  <mat-tab *ngFor="let tab of tabContent" label="{{tab.title}}">{{tab.content}} </mat-tab>
</custom-tabs-group>

有可能吗？请告诉我

Answer 1

您共享的代码使 ng-content 用法倒退了... <custom-tabs-group>将处于父级并且<ng-content>在 child 层面。

我尝试了两种方法:

• 策略 #1:将内容传递给 <mat-tab> 中的自定义子项... 这行得通
• 策略 #2:将内容传递给 <mat-tab> 的自定义子项在 child 体内……这没用

你可以check the demo here