Html 无法将焦点设置到我的<；离子输入>；当我进入页面时

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

这是我的打字脚本代码：

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>

package.json

---

你可以试试简单的方法

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

---

希望此代码能对您有所帮助。如果您遇到任何错误，请发表评论。

使用ngAfterViewChecked:

见plnkr

---

您可以使用如下所示的

指令进行操作。希望代码是不言自明的。如果您有任何问题，请在下面进行评论

玩

您可以在爱奥尼亚视图查看此内容：Id=F5F367AE

注意：只需点击
我的页面


设置焦点。ts

.html

包中的问题。json

您必须删除
“ionic native”：“2.2.11”
模块

使用
“@ionic/app脚本”：“1.1.4”
而不是
“@ionic/app脚本”：“1.0.0”

在上述更改后运行
npm i

这是一个问题。
我知道这是一个老话题，但我遇到了一个类似的问题（在我的案例中，出现了一个错误：“setFocus不是一个函数”。我的解决方案可能会在将来帮助别人（Ionic v5）

在本例中，我生成了一个组件而不是一个页面，因此我没有该组件的module.ts文件。我必须将该组件添加到父页面的声明中

declarations: [
    MyModalComponent
]

然后在组件的typescript文件中添加以下行，并按预期工作：

@ViewChild('myInputsReference', {static: false}) inputEl: IonInput;

ionViewDidEnter() {
    this.setFocusOnInput();
}

setFocusOnInput() {
    setTimeout(_ => { this.inputEl.setFocus()}, 200);
}

this.myInput.setFocus（）
不起作用？不，这就是为什么我使用let element=this.elementRef.nativeElement.querySelector（'input'）；this.renderer.invokeElementMethod（element，'focus'，[]）；是否有任何错误不，没有错误，只是在
setTimeout
处理程序中不起作用，您可以尝试：（1）
this.myInput.nativeElement.focus（）；
或（2）
element.focus（）
。可能会将测试超时时间增加到1000毫秒。这是禁用我的ion Input。按照您的repo，安装的ionic本机键盘插件做了相同的操作，但仍然不起作用。您可以使用
package.json
文件显示您的代码吗？请将其放在您的原始帖子中。或者，您可以将实现的轻量级版本放在Git repo？我会让它工作的。我们应该将set-focuser.ts导入app.module.ts吗？是的，就像在
声明中那样。请查看我的Git repo（
app.module.ts
）@devanshadhotra My bad，您应该在IonViewDiCenter中设置布尔值true。我已经更新了示例，并为Showcase添加了一个Plnkr。另外，请确保在html中识别输入(
function getfocus() {
   document.getElementById("myAnchor").focus();
}

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

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

}

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

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

@NgModule({
  declarations: [
     SetFocuser,
  ],

declarations: [
    MyModalComponent
]

@ViewChild('myInputsReference', {static: false}) inputEl: IonInput;

ionViewDidEnter() {
    this.setFocusOnInput();
}

setFocusOnInput() {
    setTimeout(_ => { this.inputEl.setFocus()}, 200);
}