離子面菜單禁用鏈接

Question

我正在用離子技術做我的第一個項目。

我在左側列出了所有站點的側面菜單。 該網站是步驟。 類似於step1，step2，step3等。 我的計划是在側面菜單中顯示所有步驟，以便用戶始終可以返回到較早的步驟，但是在完成實際步驟之前，他應該不能單擊新步驟。

因此，我需要做的是使我的附加菜單中的鏈接不可單擊。 如何在離子中做到這一點？

在app.component.ts中，我可以說我想要哪些站點：

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();

// used for an example of ngFor and navigation
this.pages = [
{ title: 'Step 1', component: Step1Page },
{ title: 'Step 2', component: Step2Page },
{ title: 'Step 3', component: Step3Page },

但是我該在哪里顯示無法點擊顯示？

Answer 1

您可以向頁面對象添加disabled屬性，如果disabled為true，則可以在列表中禁用按鈕，如下所示：

app.components：

pages: Array<{ title: string, component: any, disabled: boolean }>; //MODIFY YOUR PAGES ARRAY DECLARATION SO IT ACCEPTS A DISABLE PROPERTY
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
  this.initializeApp();

  // used for an example of ngFor and navigation
  this.pages = [
    { title: 'Step 1', component: Step1Page, disabled: false },
    { title: 'Step 2', component: Step2Page, disabled: true },
    { title: 'Step 3', component: Step3Page, disabled: true },
  ];
};

app.html：

<ion-list>
  <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" [disabled]="p.disabled">
    {{p.title}}
  </button>
</ion-list>

看到我添加了一個綁定屬性[disabled] ，該屬性將接收page.disabled屬性，並且如果該按鈕為true，則將禁用該按鈕。

由於它位於app.components中，因此菜單不會隨着用戶完成這些步驟而更新，因此我建議您使用“ 事件”來控制它。

希望這可以幫助

編輯

由於您可以通過事件發送數據，因此您可以做的是發送一個數字來標識此按鈕在pages數組中的位置，因此在app.components您將有一個如下事件：

constructor(public events: Events){
  events.subscribe('steps', step => {
    this.events[step].disabled = false;
    // The 'step' on the callback will be the number of the step.
  });
}

在按鈕中，對於每個頁面和每個步驟，您只能為一個事件發布一個事件，但是傳遞您將在pages數組中啟用的下一頁的編號。

public myButtonFunction = () => {
  this.events.publish('step', 1).then(() => { //YOUR CODE });
}