Angular *带焦点指令的ngIf

在我的应用程序中，我尝试放置一个按钮，显示/隐藏具有

布尔属性的
输入
字段。如果按钮显示
输入
，则焦点应设置在
输入
。但它似乎不起作用。如果删除
*ngIf
，则focus指令工作正常

我创造了一个能说明我意思的模型。很难描述我的问题

组件中的HTML:

<input *ngIf="filterShow.options"
       [focus]="filterFocus.options"
       [(ngModel)]="filter.options">

<button type="button"
        (click)="setShowFilter('options')">
  focus
</button>

private setShowFilter(filter: string) {
  this.filterShow[filter] = !this.filterShow[filter];

  /* reset filter */
  this.filter[filter] = "";

  this.filterFocus[filter].emit(true);
}

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

  @Input('focus') focusEvent: EventEmitter<boolean>;

  constructor(private elementRef : ElementRef,
              private renderer   : Renderer   ) { }

  ngOnInit() {
    this.focusEvent.subscribe(event => {
      this.renderer
        .invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
    });
  }
}

focus.directive.ts
：

<input *ngIf="filterShow.options"
       [focus]="filterFocus.options"
       [(ngModel)]="filter.options">

<button type="button"
        (click)="setShowFilter('options')">
  focus
</button>

private setShowFilter(filter: string) {
  this.filterShow[filter] = !this.filterShow[filter];

  /* reset filter */
  this.filter[filter] = "";

  this.filterFocus[filter].emit(true);
}

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

  @Input('focus') focusEvent: EventEmitter<boolean>;

  constructor(private elementRef : ElementRef,
              private renderer   : Renderer   ) { }

  ngOnInit() {
    this.focusEvent.subscribe(event => {
      this.renderer
        .invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
    });
  }
}

@指令({
选择器：“[焦点]”
})
导出类FocusDirective实现OnInit{
@输入（“焦点”）焦点事件：EventEmitter；
构造函数（私有elementRef:elementRef，
专用渲染器：渲染器）{}
恩戈尼尼特（）{
this.focusEvent.subscribe（事件=>{
这个是渲染器
.invokeElementMethod（this.elementRef.nativeElement，'焦点'，[]）；
});
}
}
EventEmitter
s用于
@输出
s，而不是
@输入
s。请尝试以下方法：

@Directive({
  selector: '[focus]'
})
export class FocusDirective implements OnChanges {

  @Input('focus') focus: boolean;

  constructor(private elementRef : ElementRef,
              private renderer   : Renderer   ) { }

  ngOnChanges() {
    if (this.focus) {
      this.renderer
        .invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
    }
  }
}

实现这一点而不必使用指令的更简洁的方法是使用
而不是
，并使用css将其样式设置为按钮。比如说,



这样，即使存在
*ngIf
，您也可以获得焦点，因为
现在已绑定到
 大多数情况下，它不起作用，因为焦点事件后面跟着其他事件。所以元素失去了焦点。我们需要使用
setTimeout
将其置于任务计划程序队列的末尾：

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

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

  constructor(private elementRef : ElementRef) { }

  ngOnChanges() {
    if (this.focus) {
      setTimeout(() => { this.elementRef.nativeElement.focus(); }, 0);      
    }
  }
}

您使用的事件发射器错误。它们用于子->父通信，而不是用于父->子通信。我发布的内容对我来说很有用：
渲染器
，它是
。invokeElementMethod（）
方法在这个时间点已经被弃用了。现在可以安全地直接调用
this.elementRef.nativeElement.focus（）
。