如何在离子菜单的侧面菜单中禁用单个选项？

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

}

在这里您可以看到Renew Subscription页面，我在那里使用了一个条件来启用和稳定该选项，只有从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文件中，可以通过在初始化函数中调用服务来获取价值，但请确保已准备好存储空间

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

我使用这种策略的原因是，我可以监视突出显示，以防用户访问的任何其他页面启动其状态更改，这意味着任何其他观看突出显示的页面都将获得新状态。