Ionic 2 更新按钮文本和点击事件答案

【问题标题】：Ionic 2 Updating Button Text and Event on ClickIonic 2 更新按钮文本和点击事件
【发布时间】：2017-11-30 15:59:00
【问题描述】：

对不起，如果这听起来很明显，但我是 Ionic 2 / Angular 2 的新手。提交表单后，我需要更新按钮文本和点击事件，即：

第一次点击按钮 = 提交表单 + 将按钮文本更新为“下一步”
第二次点击按钮 = 触发 goToNext()

我设法更新了按钮文本，但没有更新点击事件（到 goToNext() ）。

.html

 <form (ngSubmit)="logForm(i)">
        <ion-item>
           <ion-input type="text" [(ngModel)]="form.userinput[i]" name="userinput[i]"></ion-input>
        </ion-item>

        <button ion-button block type="submit" (click)="setNext($event.target, 'Next')">Check</button>
 </form>

.ts

setNext(element, text){
    element.textContent = 'Next';
 }

goToNext(){
// go to Next Page
}

【问题讨论】：

标签： forms angular ionic2 onclick addeventlistener

【解决方案1】：

理想情况下，您可以稍微更改设计以保留一个存储“控制器”状态的变量。例如存储页码。然后根据您所在的页面采取不同的行为。所以我建议稍微改变一下设计。

但要在不进行重大更改的情况下回答您当前的问题，您可以像绑定文本一样动态绑定处理程序。然后在第一个处理程序中，更改下一次单击的处理程序。 handler 和 text 的默认值将决定最初使用哪一个

    handler = this.setNext;
    text = 'first text';

    setNext(){
      alert('handler1 called');
      this.handler = this.goToNext;
      this.text = 'other text';
    }

  goToNext(){
    alert('second called');
    // go to Next Page
  }

在你的 html 中你喜欢

  <button ion-button block type="submit" (click)="handler()">{{text}}</button>

【讨论】：

完美！谢谢n00b。

【解决方案2】：

您可以使用 n00b 答案或类似的东西：

在html 文件中：

<button ion-button block type="submit" (click)="check()">{{btn_txt}}</button>

在ts 文件中：

btn_txt = 'Check';
check() {
   if (this.btn_txt == 'Check') {
      //do some logic
      this.btn_txt = 'Next';
   } else {
      console.log('go to next page');
   }
}

【讨论】：