Ionic2：ページに来たときにどの入力をフォーカスするかを選択するにはどうすればよいですか？

Question

私はログインフォームを表示するとき、電子メールフィールドの代わりにパスワードフィールドに焦点を合わせます。私は電子メールの分野に焦点を当てるためにいくつかの異なるソリューションを試したが、それらの両方がページ外に出る。 1つはイオンに組み込まれた "オートフォーカス"指令です。私はまた、 "focuser"指令をここに発見しました：https://blog.thecodecampus.de/ionic-2-set-focus-input-element/

ここでは、電子メールとパスワードを収集するためのフォームを開くためにここをクリックします。フォームが開いたらフォーカスはパスワードになります。私はフォーカスとオートフォーカスをディレクティブに追加して電子メールにするというすべての組み合わせを試しましたが、それはうまくいきましたが、プロフェッショナルでないジャーキーなUXを作成しました。プライムタイムの準備はできていません。すべての

HTML

<ion-content> 
    <br> 
    <h1 class="newheadertwo">Sign in or sign up.</h1> 
    <p class="p2">Use Facebook or your email and password to get started.</p> 
    <br><br> 
     <ion-list no-lines *ngIf="!formActive"> 
     <ion-grid> 
     <ion-row> 
      <ion-col> 
      <button class="fb-button" (click)="FBLogin()">Facebook Connect</button> 
      <br> 
      <button class="signup-button" (click)="showForm()">Email/Password</button> 
      <br> 
      <a (click)="password-retrieve" (click)="forgotPassword()">Forget your password?</a> 
      <br> 
      <button *ngIf="person" class="login-button-two" (click)="logout()">Log Out</button> 
      </ion-col> 
     </ion-row> 
     </ion-grid> 
    </ion-list> 

    <form (ngSubmit)="signUpLogin()" *ngIf="formActive"> 
     <ion-list class="clearbackground"> 
     <ion-item> 
      <ion-label floating class="input-label">Email Address</ion-label> 
      <ion-input [(ngModel)]="email" required="required" type="email" maxlength="200" name="email"></ion-input> 
     </ion-item> 
     <br> 
     <ion-item> 
      <ion-label floating class="input-label">Password</ion-label> 
      <ion-input [(ngModel)]="password" required="required" type="password" maxlength="200" name="password"></ion-input> 
     </ion-item> 
     <br> 
     <p class="p3">By joining, you agree to the CashPass <a (click)="terms()">Terms</a> and <a (click)="privacy()">Privacy Policy</a>.</p> 
     </ion-list> 
     <button type="submit" class="signup-button">Sign in/Join now</button> 
    </form> 
    <br> 
    <ion-row *ngIf="formActive"> 
    <ion-col> 
     <a (click)="password-retrieve" (click)="forgotPassword()">Forget your password?</a> 
    </ion-col> 
    </ion-row> 
</ion-content> 

Answer 1

まず、あなたが動作するように、オートフォーカスのために書かれているすべてのコードを削除します。以来、私はコードのすべてにアクセスする必要はありません、そこに助けることはできません。 また、可能であれば、新しいページでこれを試してから、必要なログインページに統合してみてください。

入力が存在する.htmlでは、IDをタグに追加します。 .TSで

<ion-input id="input" ....></ion-input> 

：

ngAfterViewInit(){ 
    var input = <HTMLInputElement>document.getElementById('input'); 
    console.log("Input :",input); 
    input.focus(); 
} 

が、この作品なら、私に教えてください。 .tsファイルにこの#my_input

<ion-input #my_input [(ngModel)]="email" required="required" type="email" maxlength="200" name="email"></ion-input> 

のように特定の要素に角度のIDを追加.htmlページで

：

Answer 2

あなたはイオンビューのライフサイクルフックを使って、この角度の方法を達成することができ、この例を参照してください

@Component(...) 
export class Page { 
    // ion-input is just a component implemented in ionic, so you can get its object using @ViewChild decorator 
    @ViewChild('my_input') myInput: any; 

    constructor(...){} 

    // this hook is called when the page/component is ready and displayed 
    // you can use also angular hooks (ngOnInit, ...) and you can put it in the constructor 
    ionViewDidEnter(){ 
     // use setTimeout to make sure that the page is rendered and to avoid webView lag in android 
     setTimeout(() => { 
     this.myInput.setFocus(); 
     }, 300); 
    }