是否可以啟用或禁用 Ionic3 中的選項卡？

Question

是否可以在 Ionic3 應用程序中啟用和禁用選項卡？

我嘗試在 html 中使用 *ngIf 來執行此操作，但是每次將設置從 false 更改為 true 時，都會添加一個新選項卡； 當設置從 true 更改為 false 時，選項卡不會消失。

html 是：

<ion-tabs>
  <ion-tab [root]="tab0Root" [tabTitle]="tab0Title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="people"></ion-tab>
  <ion-tab *ngIf="setting==true" [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="setting"></ion-tab>
</ion-tabs>

謝謝。

Answer 1

詳細闡述Ali Mhanna 的評論答案：

如果條件為假，您使用的*ngIf="condition"實際上不會顯示 html 標記元素。

如果您想禁用標簽 html 元素，您可以使用[diabled]="condition"

因此，使用您自己的代碼示例：

---

頁.html

<ion-tabs>
  <ion-tab [root]="tab0Root" [tabTitle]="tab0Title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="people"></ion-tab>
  <ion-tab *ngIf="isShowTab" [disabled]="!isTabEnabled" [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="setting"></ion-tab>
</ion-tabs>

---

頁面.ts

private isShowTab: boolean = false; // will NOT SHOW tab if false
private isTabEnabled: boolean = false; // will DISABLE tab if false

---

注意使用! 在isTabEnabled on [disabled] (.html) 之前，拒絕 boolean，這意味着它只會在isTabEnabled為false時禁用。