ionic3 输入框获取值的方法

在使用ionic的时候，会发现有些方法和用html来开发还是有一点区别的，在获取input框内的数据方式有2种，具体见一下代码。

1、使用#变量名的方式

     注意函数的传值，以及参数类型，获取值的语句。

    这种方式是HTMLInputElement，故获取到的值不是一个纯粹的值，而是一个输入的对象元素，需要进一步通username.value

来获取我们需要的输入框内的内容。

<ion-input type="text"  placeholder="请输入账号" #username></ion-input>
<ion-input type="password" placeholder="请输入密码" #password></ion-input>

<button ion-button block color="primary" (click)="login(username, password)">
      登录
    </button>

login(username: HTMLInputElement, password: HTMLInputElement) {
   if (username.value == "" || password.value == "") {
      this.presentToast("middle", "error", "账户或密码不能为空");
    } else if((AppConfig.USERNAME==username.value)&&(AppConfig.PASSWORD==password.value) ){
      AppConfig.loginState = true;
      this.checkRemember(username, password);  //保存用户信息
      this.navCtrl.push(GuidePage);
    }
    else {
      alert("账户或密码错误！");

    }

}

2、使用angular双向绑定的方式

    这种方式直接绑定的是一个变量，可以直接获取我们需要的值，通过改变这个变量，达到改变我们需要的值的目的。

<ion-input type="text"  placeholder="请输入账号" [(ngModel)]="username"></ion-input>
<ion-input type="password" placeholder="请输入密码" [(ngModel)]="password"></ion-input>
 <button ion-button block color="primary" (click)="login()">
      登录
    </button>


login() {
    if (this.username == "" || this.password == "") {
      this.presentToast("middle", "error", "账户或密码不能为空");
    }
    else {
      this.navCtrl.push(GuidePage);
    }
}