Question

我正在尝试获取一个Angular Directive，以编程方式控制将焦点设置在元素上。

这是我的指令在组件html中的样子：

<input type="text" class="form-control"
    [(ngModel)]="inputText" [myFocus]="isFocused">

这是我的指令的样子：

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

@Directive({
  selector: '[myFocus]'
})
export class FocusDirective implements OnInit {

  @Input('myFocus') isFocused: boolean;

  constructor(private hostElement: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    if(this.isFocused) {   
      this.renderer.selectRootElement(this.hostElement.nativeElement).focus();
    }
  }
}

然后在组件代码中，我对此进行了更改：

this.isFocused = true;

该指令包含在app.module.ts中，如下所示：

import { FocusDirective } from './directives/focus.directive';

@NgModule({
  declarations: [
    FocusDirective
  ],
   bootstrap: [AppComponent]
})
export class AppModule { }

但是，当我这样做时，焦点似乎并没有被设置。我知道Renderer2的工作方式已经发生了相当大的变化，并且我认为在ngOnInit（）方法中设置焦点的步骤出现了问题。

Answer 1

您可以使用nativeElement.focus（）

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

@Directive({
  selector: '[myFocus]'
})
export class FocusDirective implements OnInit {

  @Input('myFocus') isFocused: boolean;

  constructor(private hostElement: ElementRef, private renderer: Renderer2) { }

  ngOnChanges() {
    if(this.isFocused) {   
      this.hostElement.nativeElement.focus();
    }
  }
}

使用指令设置元素焦点

1 个答案: