ion-input自動獲取焦點
阿新 • • 發佈:2019-01-01
問題:
進入頁面時,需要某個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);