一、问题重现

前提：已经建好了自定义指令


html

:

<input type="text" placeholder="自动获取焦点" appFocus/>


focus.directive.ts


import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appFocus]'
})
export class FocusDirective {

  constructor(e: ElementRef) {
    //获取input节点
    let input = e.nativeElement;
    //使input自动获取焦点
    e.nativeElement.focus()
  }
}


input输入框不会自动聚焦！！！


二、问题解决

因为focus的执行可能不会及时出现，所以我们需要控制focus的执行时间。


focus.directive.ts


import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appFocus]'
})
export class FocusDirective {

  constructor(e: ElementRef) {
    //获取input节点
    let input = e.nativeElement;
    //使input自动获取焦点
    setTimeout(() => {
      //通过计时器将这个事件最后执行
      e.nativeElement.focus()
    }, 0);
  }
}


问题解决！！！


以上是focus不生效的解决方案，请大家关注《

项目问题

》专栏，不定期改bug。

我会将自己

平时项目中常见的问题

以及

笔试面试

的知识在CSDN与大家分享，一起进步，加油。