javascript - ionic 获取文本框值

Question

您好，我是 ionic 的新手，我有以下 html 和 js 代码。我试图在单击按钮时获取用户在文本框中输入的值。 (如果可能的话，我想将它存储到一个对象或本地缓存中，以便它可以在同一个 session 中使用)

<ion-navbar *navbar hideBackButton>
     <ion-title>Welcome</ion-title>
</ion-navbar>

<ion-content>

<ion-list>

    <ion-item>
        <ion-label floating>Please enter a nickname</ion-label>
        <ion-input type="text" value=""></ion-input>
    </ion-item>

</ion-list>

<div padding>
    <button (click)="login()" primary block>Continue</button>
</div>

接下来是我的 .js 代码

 import {Component} from "@angular/core";
 import {MenuController, NavController, Alert} from "ionic-angular";
 import {Index} from "../index/index";

 @Component({
    templateUrl: 'build/pages/login/login.html'
 })
 export class Login {
    static get parameters() {
        return [[MenuController], [NavController]];
    }

 constructor(menu, nav) {
        this.menu = menu;
        this.menu.swipeEnable(false);

        this.nav = nav;
    }

    login() {
        let alert = Alert.create({
        title:      'You have entered',
        message:    'Hello',
        buttons:    [
    {
      text: 'Cancel',
      handler: () => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Ok',
      handler: () => {
        console.log('Ok clicked');

                    console.log(getElementById('nickname'));

                    // this.menu.swipeEnable(true);
                    // this.nav.pop(Login);
                    // this.nav.setRoot(Index);
      }
    }
  ]
    });

    this.nav.present(alert);
}
 }

Answer 1

Ionic 与 angular 一起工作，angular 以两种方式绑定(bind)作为其核心原则。有很多方法可以实现这一点，但一种方法是设置 html 项目的模型。 因此，如果您将输入设置为具有 ng 模型

<ion-input type="text" value="" [(ngModel)]="inputName"></ion-input>

然后在你的 Controller (类)中你将拥有

this.inputName;

它将保留来自 html 的值更改。