单击打开输入的按钮时获得焦点

Question

我如何关注首先隐藏的输入，但在单击按钮时打开？ autofocus 属性只在第一次生效，'nativeElement' 未定义。在 jQuery 上一切都很简单，但我需要没有它。

<input type="text" *ngIf="isVisible" #test autofocus>
<button (click)="testAction()">Test</button>

@ViewChild('test') test: ElementRef;
isVisible = false;
testAction() {
this.isVisible = !this.isVisible;
this.test.nativeElement.focus();
}

Answer 1

我做了和你问的类似的事情；但是，我是使用指令来完成的：

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

@Directive({
  selector: '[afnFocus]'
})
export class FocusDirective implements OnChanges {
  @Input() afnFocus: boolean;

  constructor(private el: ElementRef) { }

  ngOnChanges() {
    if (this.afnFocus) {
      this.el.nativeElement.focus();
    }
  }

}

然后将指令放在元素上并将其绑定到布尔值 isVisible。

Answer 2

另一种方法

testAction() {
 this.isVisible = !this.isVisible;

 if (this.test && this.test.nativeElement) {
    setTimeout(() => this.test.nativeElement.focus(), 800);
 }
}

单击打开输入的按钮时获得焦点

Focus when clicking on the button that opens the input

javascript

focus

autofocus

angular