Html 如何在ionic中禁用侧菜单内的单个选项？

我想根据ionic中的条件禁用侧菜单中的按钮。需要检查的条件只有在我登录到应用程序后才可用。我在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响应登录后才能获得该选项。这是我的app.html页面

{{p.title}}

我的策略是创建一个提供者/服务，公开一个可观察到的行为主体

// 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,
  },
   ......
 ]

---

我之所以会使用这种策略，是为了在用户访问的任何其他页面发起状态更改时，我可以监视突出显示，这意味着任何其他页面观看突出显示都将获得新状态。

我通过获取按钮id，然后根据条件，在单击侧菜单打开按钮时启用/禁用它来解决此问题

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

openMenu（）{
if（this.localStorage.getItem（“plantoptitle”）=“订阅已过期”）{
（document.getElementById（“续订”））.disabled=false；
}else（document.getElementById（“btnExcel”））.disabled=true；
}

好的，我用了另一种方法解决了我的问题