gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 19:34:39 26 4
gpt4 key购买 nike

我想使用 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>

有可能吗?请告诉我

最佳答案

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

我尝试了两种方法:

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

你可以check the demo here

关于javascript - 如何使用 Angular Materials 选项卡制作自定义选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56069092/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com