如何禁用离子侧菜单内的单个选项？

Question

我想根据 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 页面

<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;
}