1. 程式人生 > >ion-input自動獲取焦點

ion-input自動獲取焦點

問題:

    進入頁面時,需要某個input自動獲取焦點

解決問題:

    1. 因為 Angular 是不推薦直接通過 DOM 操作獲取元素的,所以要操作元素需要通過 @ViewChild 裝飾器。

import { Component, ViewChild } from '@angular/core';

    2. 在HTML中對元素新增引用 nameInput:

<ion-input #nameInput clearInput type="text" placeholder="輸入使用者名稱" disabled="{{!isEdit}}" [(ngModel)]="user.userName"></ion-input>

    3. 在 .ts 中可以通過 ViewChild 獲取指定元素的引用:      

import { ViewChild } from '@angular/core';

@ViewChild('nameInput') nameInput;

    4. 獲取到對應元素的引用後,你想新增焦點,如下:        

setTimeout(() => {

      this.nameInput.setFocus();//輸入框獲取焦點

},150);