Question

我有以下指令：

import {Directive, ElementRef, Input, OnChanges, OnDestroy, Optional} from '@angular/core';

@Directive({
    selector: '[appFocus]',
})
export class AppFocusDirective implements OnChanges {
    @Input() appFocus: boolean = false;
    @Input() focusDelay: number = 0;

    constructor(private elementRef: ElementRef) {}
    ngAfterViewChecked(){
      this.checkFocus();
    }

    private checkFocus() {
        if (this.appFocus && document.activeElement !== this.elementRef.nativeElement) {
            let checkFocusTimeoutHandle: number;
            const focus = () => {
                this.elementRef.nativeElement.focus();
            };
            checkFocusTimeoutHandle = setTimeout(focus, this.focusDelay) as any;
        }
    }
}

其目的是在初始化视图后将焦点放在元素上。我正在使用离子构建我的应用程序，我需要离子输入组件具有这种效果，但是它似乎无法正常工作。但是，当我在本机输入元素上使用此指令时，它确实起作用。

  <!--doesn't get focused (when uncommented)-->
  <!--<ion-input [appFocus]="true" ></ion-input>-->
  <!--does get focused-->
  <input [appFocus]="true" />

要使此功能适用于离子项目，我需要更改什么？

这里是演示的STACKBLITZ。为了使focus（）效果起作用，必须通过其DIRECT LINK来查看stackblitz应用。

Answer 1

如果要通过编程方式使用模板ref来设置离子项目焦点，或者使用ViewChild从dom中获取引用

HTML

 <ion-input  #ref type="text" formControlName="x"></ion-input>
   </ion-item>

TS

 @ViewChild('ref') ref:Elementef;

 onFocus(){      
   //set autofocus when click the button
     this.ref['_native'].nativeElement.focus();
  }

其他建议使用自动对焦属性

<ion-input autofocus="true" name="title"></ion-input>

示例：https://stackblitz.com/edit/ionic-ewuvzq

Answer 2

或者您可以像这样使用autofocus本机属性。

testing

Angular Custom Focus指令不适用于离子项目（但适用于本机<input />）

2 个答案: