更改选项卡时块的显示
更改选项卡时块的显示
提问于 2019-05-30 20:42:29
我有一个带有选项卡的面板和一个带有content container的面板。切换选项卡时，只需更改div，所有选项卡中都应显示header。我使用被监听的事件selectedTabChange()来检查哪个选项卡处于活动状态，并显示必要的div标记。我应该向selectedTabChange()写入什么？
.html：
<mat-tab label="first"></mat-tab>
<mat-tab label="second"></mat-tab>
<mat-tab label="third"></mat-tab>
</mat-tab-group>
<div class="container">
<div class="header">Header</div>
<div *ngIf="isBlock2! && !isBlock3" class="block1">Text</div>
<div *ngIf="isBlock1! && !isBlock3" class="block2">Text</div>
<div *ngIf="isBlock1! && !isBlock2" class="block3">Text</div>
</div>.ts：
public isBlock2 = false;
public isBlock3 = false;
changeTabs(event) : void {
isBlock1 != isBlock1;
}回答 2
Stack Overflow用户
发布于 2019-05-30 21:09:40
在这里，您可以使用
ng模板和ng容器
演示：
selectedTabChangeEvent(event){
this.isBlock1 = false;
this.isBlock2 = false;
this.isBlock3 = false;
if(event.index === 0){
this.isBlock1 = true;
}else if(event.index === 1){
this.isBlock2 = true;
}else {
this.isBlock3=true;
}
}Stack Overflow用户
发布于 2019-05-30 22:41:43
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>试试这样的东西
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56378551
复制相关文章
相似问题
腾讯云开发者
