当我进入页面时，无法将焦点设置到我的

I want focus to be set on my <ion-input> as I enter the page

我想在进入页面时将焦点设置在我的上

This is my typescript code:

这是我的打字稿代码：

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);
    }

}

And this is what i have done with my html file:

这就是我用我的html文件做的事情：

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

    </ion-item>

Whenever I enter this page of my application, I would like the keyboard to be opened and focus to be set on ion-input

每当我进入我的应用程序的这个页面时，我希望打开键盘并将焦点设置在离子输入上

My config.xml includes:

我的config.xml包括：

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

package.json

的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"
}

3 个解决方案

#1

use ngAfterViewChecked:

使用ngAfterViewChecked：

See plnkr here

请参见plnkr

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

@Component({
  selector: 'page-comments',
  templateUrl: 'comments.html'
})

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

needsFocus: boolean;

constructor(public navCtrl: NavController,private renderer: Renderer, 
            private elementRef: ElementRef, 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();
    }
}

#2

You can do it using Directive as shown below.Hope code is self-explanatory.If you have any issue please comment below.

您可以使用如下所示的指令来执行此操作。希望代码不言自明。如果您有任何问题，请在下面发表评论。

Play with Git Repo code.

玩Git Repo代码。

You can View this on Ionic View: Id = F5F367AE

您可以在Ionic View上查看：Id = F5F367AE

Note: Just tap My Page.

注意：只需点按我的页面。

set-focuser.ts

设置focuser.ts

import { Directive, Renderer, ElementRef } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';

@Directive({
  selector: '[set-focuser]' // Attribute selector
})
export class SetFocuser {

  constructor(private renderer: Renderer, private elementRef: ElementRef, public keyboard: Keyboard) {
  }

  ngAfterViewInit() {
    const element = this.elementRef.nativeElement.querySelector('input');
    // to delay 
    setTimeout(() => {
      this.renderer.invokeElementMethod(element, 'focus', []);
      this.keyboard.show();
    }, 500);
  }

}

.html

html的

 <ion-input set-focuser type="text"></ion-input>

app.module.ts

app.module.ts

import { SetFocuser } from "../components/set-focuser/set-focuser";

@NgModule({
  declarations: [
     SetFocuser,
  ],

Issues on your package.json

package.json上的问题

You have to remove "ionic-native": "2.2.11", module.

你必须删除“ionic-native”：“2.2.11”，模块。
Use "@ionic/app-scripts": "1.1.4", instead of "@ionic/app-scripts": "1.0.0",

使用“@ ionic / app-scripts”：“1.1.4”，而不是“@ ionic / app-scripts”：“1.0.0”，
After the above changes run npm i

经过上述更改后，我将运行

This is the official package.json file.

这是官方的package.json文件。

#3

-2

You can try simple method.

你可以试试简单的方法。

 <div ng-init="getfocus()">
   <ion-input id="myAnchor" type="text" placeholder="Write Your Comments"/>
</div>

In js file call a function with ng-init

在js文件中使用ng-init调用函数

function getfocus() {
   document.getElementById("myAnchor").focus();
}

Hope this code will help you.if you get any error please comment.

希望这段代码能为您提供帮助。如果您有任何错误，请发表评论。

#1