在一個角度我添加了一個選項卡控制元件，但我將從后端獲得可用選項卡的串列。所以我添加了一個代碼來顯示基于某個鍵的模板。但是每次切換標簽時，我都可以看到新標簽和當前標簽的 OnInit 事件。我不需要再次加載當前選項卡資訊，因此，完美地，它應該為當前選項卡呼叫 onDestroy 并為新選項卡呼叫 OnInit。
<mat-tab-group disableRipple (selectedTabChange)="tabChange($event)">
<ng-container *ngFor="let info of tabs">
<mat-tab [label]="info.title">
<ng-template matTabContent>
<ng-container *ngIf="selectedTab == 'step1'">
<app-step1></app-step1>
</ng-container>
<ng-container *ngIf="selectedTab == 'step2'">
<app-step2></app-step2>
</ng-container>
<ng-container *ngIf="selectedTab == 'step3'">
<app-step3></app-step3>
</ng-container>
</ng-template>
</mat-tab>
</ng-container>
</mat-tab-group>
我試圖代替 ngIf 添加一個 [hidden] 屬性并嘗試進行切換，但對我來說仍然不是正確的行為
添加了一個有問題的代碼。 堆疊閃電戰
uj5u.com熱心網友回復：
如果你想使用 ngIf，你只需要檢查你的 ngIf 中的 tabKey 而不是選中的選項卡。如果選項卡 tabKey 是 step1 的簡單邏輯，則呈現 step1 組件，依此類推。Mat 選項卡負責呈現活動選項卡內容。
即使您使用隱藏解決方案或不顯示任何解決方案，mat tab 也會重新渲染活動組件并銷毀先前選擇的組件。
<mat-tab-group disableRipple (selectedTabChange)="tabChange($event)">
<mat-tab *ngFor="let info of tabs" [label]="info.title">
<ng-template matTabContent>
<app-step1 *ngIf="info.tabKey == 'step1'"></app-step1>
<app-step2 *ngIf="info.tabKey == 'step2'"></app-step2>
<app-step3 *ngIf="info.tabKey == 'step3'"></app-step3>
</ng-template>
</mat-tab>
</mat-tab-group>
這是我的作業stackblitz示例
uj5u.com熱心網友回復：
我遇到了類似的問題，我們的解決方案是應用display: none在選項卡上，而不是*ngIf防止重新渲染。
.html
<mat-tab-group disableRipple (selectedTabChange)="tabChange($event)">
<ng-container *ngFor="let info of tabs">
<mat-tab [label]="info.title">
<ng-template matTabContent>
<ng-container [class.hide-tab]="selectedTab !== 'step1'">
<app-step1></app-step1>
</ng-container>
<ng-container [class.hide-tab]="selectedTab !== 'step2'">
<app-step2></app-step2>
</ng-container>
<ng-container [class.hide-tab]="selectedTab !== 'step3'">
<app-step3></app-step3>
</ng-container>
</ng-template>
</mat-tab>
</ng-container>
</mat-tab-group>
.css
.hide-tab {
display: none;
}
注意：這意味著您的所有選項卡都將在頁面加載時加載，但一次只會顯示其中一個內容。如果您不希望這種情況發生，您可能需要應用更多的條件邏輯以及*ngIf和display: none
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/524413.html
標籤：有角度的打字稿垫标签
上一篇：如何以角度將HTML元素存盤在變數中并在html檔案中使用它
下一篇：通過JS填充Angular表單