使用指令聚焦输入域

时间:2017-11-17 09:21:26

标签: angular ionic-framework ionic2

我正在使用指令来聚焦输入字段。这在第一次进入页面时效果很好。但是当我向后导航或弹出到特定页面时,不会调用此方法。我想这是因为ngAfterViewInit()不再被调用了。我尝试使用ionViewDidEnter() / onPageDidEnter(),但在这种情况下,根本没有调用焦点。

在某些页面中使用:

 <ion-input type="text" [(ngModel)]="matrikel" focus>

focuser.ts

@Directive({
    selector: '[focus]' // Attribute selector
})

export class FocusDirective {

    @Input() focus: any;


    constructor(private el: ElementRef, private renderer: Renderer, private globalVariables: GlobalsVariable) { }

   ngAfterViewInit(){

            const searchInput = this.el.nativeElement.querySelector('input');
            setTimeout(() => {
                this.renderer.invokeElementMethod(searchInput, 'focus', []);
            }, 650);
}

}

1 个答案:

答案 0 :(得分:0)

您必须使用ionViewCanEnter()。哪个会在ionViewDidLoad()之前调用。

<强> HTML

<ion-input #focusInput type="text" [(ngModel)]="matrikel">

<强> focuser.ts

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

    export class FocusDirective {
    @ViewChild('focusInput') focus: any;

    constructor(private el: ElementRef, private renderer: Renderer, private globalVariables: GlobalsVariable) { }

    ionViewCanEnter() {
        setTimeout(() => {
          this.focus.setFocus();
        }, 500);
   }
   }