[英]Changing the order of Angular mat-tabs
I am using mat-tabs
from Angular Material and I need to create the tabs dynamically depending on some conditions.我正在使用来自 Angular Material 的mat-tabs
,我需要根据某些条件动态创建选项卡。
<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
<mat-tab id="tab0" label="First tab">
// Tab content
</mat-tab>
<mat-tab id="tab1" label="Second tab">
// Tab content
</mat-tab>
<mat-tab id="tab2" label="Third tab">
// Tab content
</mat-tab>
<mat-tab-group>
Depending on some condition, I need to be able to generate the tabs like this for example:根据某些条件,我需要能够生成这样的选项卡,例如:
<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
<mat-tab id="tab1" label="Second tab">
// Tab content
</mat-tab>
<mat-tab id="tab0" label="First tab">
// Tab content
</mat-tab>
<mat-tab id="tab2" label="Third tab">
// Tab content
</mat-tab>
<mat-tab-group>
Is there a setting on the MatTabs API or some trick I can do from JavaScript to achieve this? MatTabs API 上是否有设置或我可以通过 JavaScript 执行的一些技巧来实现此目的? Thanks!谢谢!
You can use ng-template
for this like following.您可以使用ng-template
如下所示。
<ng-template #content1>
<div>Content 1</div>
</ng-template>
<ng-template #content2>
<div>Content 2!</div>
</ng-template>
Then use in your tabs accordingly.然后相应地在您的标签中使用。
<mat-tab id="tab0" [label]="yourFirstLabel">
<div *ngIf="yourFlag; then content1 else content2"> </div>
</mat-tab>
<mat-tab id="tab1" [label]="yourSecondLabel">
<div *ngIf="yourFlag; then content2 else content1"> </div>
</mat-tab>
Note that you need to update your labels ( yourFirstLabel
and yourSecondLabel
) too请注意,您也需要更新标签( yourFirstLabel
和yourSecondLabel
)
You could try using an *ngFor
to keep the tabs dynamic您可以尝试使用*ngFor
来保持标签动态
html html
<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
<mat-tab *ngFor="let tab in tabList" id="{{tab.tabId}}" label="tab.label">
<div [innerHtml]="tab.innerHtml"></div>
</mat-tab>
<mat-tab-group>
ts ts
tabList = [{
label: 'First Tab',
innerHtml: `<div>hello, World!</div>`,
tabId: 'tab1'
}, {
label: 'Second Tab',
innerHtml: `<div>I am a different Tab</div>`,
tabId: 'tab2'
}];
Then from there you can you can sort the this.tabList
object however you want with your conditions然后从那里你可以根据你的条件对this.tabList
对象进行排序
EDIT:编辑:
After a question in comments about *ngIf
on the <mat-tab>
's, here is a revised answer with *ngIf
statements在对<mat-tab>
上的*ngIf
评论提出问题后,这里是*ngIf
语句的修订答案
html html
<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
<ng-template ngFor let-tab [ngForOf]="tabList">
<mat-tab *ngIf="tab.showTab || someHideFunction(tab)" id="{{tab.tabId}}" label="tab.label">
<div [innerHtml]="tab.innerHtml"></div>
</mat-tab>
</ng-template>
<mat-tab-group>
ts ts
tabList = [{
label: 'First Tab',
innerHtml: `<div>hello, World!</div>`,
tabId: 'tab1',
showTab: true
}, {
label: 'Second Tab',
innerHtml: `<div>I am a different Tab</div>`,
tabId: 'tab2',
showTab: false
}, {
label: 'Third Tab',
innerHtml: `<app-custom-component [input]="tempVariable"></app-custom-component>`,
tabId: 'tab3',
showTab: true
}];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.