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

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 条件检查未正确调用，我希望它是 enabled/disabled 基于订阅过期状态。

Answer 1

我的策略是创建一个 provider/service 公开可观察对象，特别是 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 函数中的服务来获取值，但请确保存储已准备就绪

// 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 解决了这个问题，然后根据条件我 enabled/disabled 当侧边菜单打开按钮被点击时它。

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

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

How to disable a single option inside side menu in ionic?

html

angular

ionic-framework

ionic3

angular5