Question

我正在制作我的第一个离子项目。

我在左侧有一个侧边菜单，我列出了所有网站。这些网站是台阶。比如，step1，step2，step3等。我的计划是显示侧面菜单中的所有步骤，以便用户可以随时返回到较旧的步骤，但在完成实际步骤之前，他无法单击新步骤。

所以我需要的是让我的sidemenu中的链接不可点击。如何在离子中做到这一点？

在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属性，如果禁用为真，则可以在列表中禁用按钮，如下所示：

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属性，如果该按钮为真，则会禁用该按钮。

有可能在app.components中，当用户完成这些步骤时菜单不会更新，我会使用Events来控制它。

希望这有帮助

修改

由于您可以通过事件发送数据，您可以执行的操作是发送一个数字来标识此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 });
}

离子侧面菜单禁用链接

1 个答案:

修改