html5 – 当我进入页面时,无法设置焦点

我想要将焦点设置在我的< ion-input>当我进入页面

这是我的脚本代码：

import { Component,Input,ViewChild,ElementRef,Renderer } from '@angular/core';
import { NavController,PopoverController,NavParams,ViewController,ModalController } from 'ionic-angular';

@Component({
  selector: 'page-comments',templateUrl: 'comments.html'
})
export class CommentsParentPage {
    @ViewChild('input') myInput;

    constructor(public navCtrl: NavController,private renderer: Renderer,private elementRef: ElementRef,public modalCtrl: ModalController) {
    }

    ionViewLoaded() {

       setTimeout(() => {
          let element = this.elementRef.nativeElement.querySelector('input');
          this.renderer.invokeElementMethod(element,'focus',[]);
       },150);
    }

}

这是我用html文件做的：

<ion-item>
      <ion-input set-focuser type="text" placeholder="Write Your Comments" [(ngModel)]="addComment"></ion-input>

    </ion-item>

每当我进入我的应用程序的这个页面,我想要打开键盘,并将焦点设置为离子输入

我的config.xml包括：

<preference name="KeyboarddisplayRequiresUserAction" value="false" />

package.json

{
  "name": "sample app","author": "","homepage": "http://ionicframework.com/","private": true,"scripts": {
    "clean": "ionic-app-scripts clean","build": "ionic-app-scripts build","ionic:build": "ionic-app-scripts build","ionic:serve": "ionic-app-scripts serve"
  },"dependencies": {
    "@angular/common": "2.2.1","@angular/compiler": "2.2.1","@angular/compiler-cli": "2.2.1","@angular/core": "2.2.1","@angular/forms": "2.2.1","@angular/http": "2.2.1","@angular/platform-browser": "2.2.1","@angular/platform-browser-dynamic": "2.2.1","@angular/platform-server": "2.2.1","@ionic-native/core": "^3.4.4","@ionic-native/keyboard": "^3.4.4","@ionic/cloud-angular": "^0.10.0","@ionic/storage": "1.1.7","angular2-moment": "^1.1.0","google-libphonenumber": "^2.0.14","ionic-angular": "2.0.0-rc.4","ionic-gallery-modal": "0.0.7","ionic-native": "2.2.11","ionicons": "3.0.0","rxjs": "5.0.0-beta.12","zone.js": "0.6.26"
  },"devDependencies": {
    "@ionic/app-scripts": "1.0.0","typescript": "2.0.9"
  },"cordovaPlugins": [
    "ionic-plugin-keyboard","cordova-plugin-whitelist","cordova-plugin-console","cordova-plugin-statusbar","cordova-plugin-device","cordova-plugin-splashscreen","cordova-sqlite-storage","cordova-plugin-x-toast","cordova-plugin-camera","cordova-plugin-compat","cordova-plugin-image-picker","cordova.plugins.diagnostic",{
      "id": "phonegap-plugin-push","locator": "phonegap-plugin-push","variables": {
        "SENDER_ID": "461076790064"
      }
    },"cordova-plugin-contacts","ionic-plugin-deploy","cordova-plugin-x-socialsharing",{
      "locator": "https://github.com/napolitano/cordova-plugin-intent","id": "com.napolitano.cordova.plugin.intent"
    },"cordova-plugin-screen-orientation","cordova-plugin-file","cordova-plugin-file-transfer"
  ],"cordovaPlatforms": [
    {
      "platform": "android","version": "","locator": "android"
    }
  ],"description": "ionic2: An Ionic project"
}

解决方法

使用ngAfterViewChecked：

见plnkr here

import { Component,Renderer,AfterViewChecked,ChangeDetectorRef  } from '@angular/core';
import { NavController,templateUrl: 'comments.html'
})

export class CommentsParentPage implements AfterViewChecked {
@ViewChild('input') myInput;

needsFocus: boolean;

constructor(public navCtrl: NavController,public modalCtrl: ModalController,private _changeDetectionRef: ChangeDetectorRef) {
}

ionViewDidEnter() {

   this.needsFocus = true;
}

public ngAfterViewChecked(): void {
    if (this.needsFocus) {
        this.needsFocus = false;
        this.myInput.setFocus();
        this._changeDetectionRef.detectChanges();
    }
}

原文地址：https://www.jb51.cc/html5/168219.html