이온 3 - 이온으로 사용자를 자극하기위한 매개 변수 얻기

Question

나는 이미 일부 비디오를 연구하고 보았지만 의심의 여지가 여전히 명확하지 않았습니다. 그것은 아주 간단할지 모르지만 어려움이 있습니다. 누구든지 나를 도울 수 있다면, 나는 감사한다.

나는이 로그인 페이지가 있습니다

<form id="login-form1"> 
    <ion-list id="login-list2"> 
     <ion-item id="login-input1"> 
     <ion-label> 
      Email 
     </ion-label> 
     <ion-input type="email" placeholder=""></ion-input> 
     </ion-item> 
     <ion-item id="login-input2"> 
     <ion-label> 
      Password 
     </ion-label> 
     <ion-input type="password" placeholder=""></ion-input> 
     </ion-item> 
    </ion-list> 
    <div class="spacer" style="height:40px;" id="login-spacer1"></div> 
    <button id="login-button1" ion-button color="stable" block on-click="goToHome()"> 
     Log in 
    </button> 
    <button id="login-button2" ion-button clear color="positive" block href-inappbrowser="/signup"> 
     Or create an account 
    </button> 
    </form> 

을 그리고 이것은 TS :

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { HomePage } from '../home/home'; 

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 
export class LoginPage { 

    constructor(public navCtrl: NavController) { 
    } 
    goToHome(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(HomePage); 
    } 
} 

그리고 내 기능 goToHome에서 사용자 로그인 필요, 나는 이메일과 PSW이 필요합니다. 어떻게받을 수 있습니까?

Answer 1

이 같은 입력 양식을 사용하여 얻을 수 있습니다 :

<form (ngSubmit)="goToHome()"> 
    <ion-item> 
    <ion-label>Email</ion-label> 
    <ion-input type="text" [(ngModel)]="loginInput.email" name="email" type="email" placeholder=""></ion-input> 
    </ion-item> 
    <ion-item> 
    <ion-label>Password</ion-label> 
    <ion-textarea [(ngModel)]="loginInput.password" name="password" type="password" placeholder=""></ion-textarea> 
    </ion-item> 
    <button ion-button type="submit" block>Add Todo</button> 
</form> 


export class LoginPage { 
    loginInput = {}; 

    constructor(public navCtrl: NavController) { 
    } 

    goToHome() { 
    console.log(this.loginInput) 
    } 
} 

주요 아이디어는 모든 입력을 얻을 수 ngModel을 사용하는 것입니다. 참고 : Form 태그에서 ngModel을 사용하는 경우 name 속성을 제공해야합니다.

여기에 양식을 만드는 방법에 대한 가이드를 사용하십시오. https://ionicframework.com/docs/developer-resources/forms/