Question

我正在Ionic 3框架中开发一个应用程序。这是一个基本的计算应用程序。我做了两个输入字段和一个按钮。当用户按下按钮时，将计算两个变量。这是我的HTML代码。

    <ion-grid>
      <ion-row>
          <ion-col> 
             <ion-list>
              <ion-item>
                <ion-label floating>Ray (r)</ion-label>
                <ion-input type="number" [(ngModel)]="ray"></ion-input>
              </ion-item>        
            </ion-list>
            <ion-list>
              <ion-item>
                <ion-label floating>Time (T)</ion-label>
                <ion-input type="number" [(ngModel)]="circulationtime"> 
                </ion-input>
              </ion-item>        
            </ion-list>
          </ion-col>         
      </ion-row>
  </ion-grid>
    <button ion-button full (click)="calculateTwo(ray, circulationtime)">Calculate</button>

这是我在打字稿中的代码：

calculateTwo(ray, circulationtime){
   this.result = "Speed: " + (2 * Math.PI * ray / circulationtime) + " m/s";    
  }

我希望用户有两种与按钮互动的方式：

1：他单击按钮（有效） 2：他点击了移动键盘上的Enter（问题）

我已经在Google上查看过，并且有一个名为（keyup.enter）的事件，但是我现在不知道该事件的工作方式。

有人可以指出我正确的方向吗？

亲切的问候

Answer 1

您将要使用@HostListener处理按键。这就是我使用主机监听器的方式

  import {HostListener} from '@angular/core'

  @HostListener('document:keyup', ['$event'])
  handleKeyPress(event: KeyboardEvent) {
    if (event.key === 'enter') {
      this.result = "Speed: " + (2 * Math.PI * this.ray / this.circulationtime) + " m/s";   
    }
  }

或者，您可以重用已经拥有的功能并执行此操作

  @HostListener('document:keyup', ['$event'])
  handleKeyPress(event: KeyboardEvent) {
    if (event.key === 'enter') {
      this.calculateTwo(this.ray, this.circulationtime);   
    }
  }

Answer 2

我将(ngSubmit)与<form>标签示例结合使用：

<form (ngSubmit)="calculateTwo(weight, speed)">
<ion-grid>
  <ion-row>
    <ion-col>
      <ion-list>
        <ion-item>
          <ion-label floating>Massa (m)</ion-label>
          <ion-input name="weight" type="number" [(ngModel)]="weight"></ion-input>
        </ion-item>
      </ion-list>
      <ion-list>
        <ion-item>
          <ion-label floating>Snelheid (v)</ion-label>
          <ion-input name="speed" type="number" [(ngModel)]="speed"></ion-input>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>
</ion-grid>
<button ion-button full type="submit">Bereken</button>

这很好

与Ionic 3中的按钮交互两种方式

2 个答案: