如何禁用離子側菜單內的單個選項？

Question

我想根據離子中的條件禁用側面菜單中的按鈕。 需要檢查的條件只有在我登錄應用程序后才可用。 我像這樣在app.component.ts中定義我的頁面

// used for an example of ngFor and navigation
this.pages = [
  {
    title: "menu",
    component: MenuPage,
    src: "assets/imgs/grid.png",
    color:
      this.localStorage.getItem("highlight") == "menu" ? "danger" : "light",
    class:
      this.localStorage.getItem("highlight") == "menu"
        ? "item-md-danger"
        : "",
    isEnabled: true,
  },
  {
    title: "about app",
    component: AboutPage,
    src: "assets/imgs/smartphone.png",
    color:
      this.localStorage.getItem("highlight") == "about app"
        ? "danger"
        : "light",
    class:
      this.localStorage.getItem("highlight") == "menu"
        ? "item-md-danger"
        : "",
    isEnabled: true,
  },
  .
  .
  .
  {
    title: "Renew Subscription",
    component: PlansPage,
    src: "assets/imgs/subscription.png",
    color: "light",
    isEnabled:
      this.localStorage.getItem("plantoptitle") == "Subscription expired"
        ? true
        : false,
  },
  {
    title: "Logout",
    component: LoginPage,
    src: "assets/imgs/logout_m.png",
    color: "light",
    isEnabled: true,
  },
];

}

在這里您可以看到“續訂訂閱”頁面，我在那里使用了一個條件來啟用和穩定該選項，我只有在從 API 響應登錄后才能獲得該選項。 這是我的應用程序。html頁面

 <ion-menu [content]="content" side="right" persistent="true" (ionOpen)="openMenu()" > <ion-header> <ion-toolbar> <ion-title> <div class="menutp"><img src="assets/imgs/header_tp.png" /></div> </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button id="{{p.title}}" menuClose ion-item *ngFor="let p of pages" color="{{p.color}}" (click)="openPage(p)" [disabled]=".p.isEnabled" > <span><img src="{{p.src}}" class="imgH" /></span> <span>{{p.title}}</span> </button> </ion-list> </ion-content> </ion-menu> <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

但是這種情況不能正常工作。 如果我的訂閱已過期並且當我第一次嘗試登錄時，進入菜單頁面並打開側面菜單以檢查續訂選項，它仍然被禁用。 但是，假設我登錄后現在在菜單頁面中，當我嘗試再次運行構建並成功構建並嘗試打開側面菜單時，現在它已啟用，或者如果我在登錄后滑動關閉應用程序並且重新打開它，按鈕已啟用。 我該如何解決這個問題？ 我認為 isEnabled 條件檢查沒有正確調用，我希望根據訂閱過期狀態啟用/禁用它。

Answer 1

我的策略是創建一個提供者/服務來公開一個可觀察的對象，特別是一個 BehaviorSubject

// Imports here
import ....
....

// The initial value of the this observable be an empty string
 highlightState = new BehaviorSubject('');

constructor( private storage: Storage)
{
    this.storage.ready().then(() => {
      this.checkHighlight();
    });
}


// When storage is ready get the stored value and emit it as the next value
async checkHighlight() {
    return await this.storage.get('highlight')
      .then((res) => {
        if (res === null) {
          // No previously stored highlight
          return;
        } else {
          // Emit the stored value
          this.highlightState.next(res.highlight);
          return;
        }
      });
  }

  getcurrentHighlight(){
    return this.highlightState.value;
  }

然后在您的應用程序 ts 文件中，您可以通過在 initalize func 中調用服務來獲取值，但請確保存儲已准備好

// This will get the latest value emitted and can be used in your menus

this.highlight = this.myHighligtService.getcurrentHighlight();

this.pages = [
  {
    title: "menu",
    component: MenuPage,
    src: "assets/imgs/grid.png",
    color:
      this.highlight === "menu" ? "danger" : "light",
    class:
      this.highlight === "menu"
        ? "item-md-danger"
        : "",
    isEnabled: true,
  },
   ......
 ]

我使用這種策略的原因是，我可以監控突出顯示，以防用戶正在訪問的任何其他頁面啟動其狀態更改，這意味着任何其他頁面觀看突出顯示都將獲得新狀態。

Answer 2

我通過獲取按鈕 id 解決了這個問題，然后根據單擊側面菜單打開按鈕時啟用/禁用它的條件。

openMenu() {
 if(this.localStorage.getItem("plantoptitle") == "Subscription expired") {
  (<HTMLInputElement> document.getElementById("Renew Subscription")).disabled = false;
 } else (<HTMLInputElement> document.getElementById("btnExcel")).disabled = true;
}