当从ngIf触发文本输入时，为什么将我的文本输入聚焦在指令构造函数上不起作用？

Question

请看看这个堆叠闪电战：

https://stackblitz.com/edit/angular-qnjw1s

它演示了如何通过使用指令选择文本输入并在构造函数中的nativeElement上调用focus（）来使文本输入成为焦点。

现在请看一下这个变体：

https://stackblitz.com/edit/angular-zsrhpr

这是同一件事，除了它包含一个切换按钮，该按钮可切换使用ngIf输入的文本的可见性。在这种情况下，似乎无法在nativeElement上调用focus（）。您知道它是从控制台日志中调用的。由于某种原因，在这种情况下，它不想集中精力。

有人可以看到原因吗？

编辑：我看来https://stackblitz.com/edit/angular-zsrhpr上的链接没有向您显示我想要的版本。我无法省钱。

这是您应该看到的代码。请复制并粘贴：

app.component.html：

<input *ngIf="b" focus>
<button (click)="b = !b">Toggle</button>

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  b = false;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { FocusDirective } from './focus.directive';

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

focus.directive.ts：

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

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

  constructor(elm: ElementRef) {
    console.log('before focusing');
    elm.nativeElement.focus();
    console.log('after focusing');
  }
}

Answer 1

* ngIf从DOM中删除该元素，并且由于该元素不存在，当您使用elm.nativeElement.focus（）;时，它将变得不确定。在指令中...这是正常行为

您可以使用CSS可见性属性来隐藏该元素，但是该元素确实成为DOM的一部分。

directive.ts ：

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

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

  constructor(elm: ElementRef) {
    console.log('before focusing');
    elm.nativeElement.focus();
    console.log('after focusing');
  }
}

相关的 HTML ：

<input focus [ngStyle]="{'visibility':fieldVisible === true ? 'visible' : 'hidden' }"> <br/> 

so a page when loads, sets the focus to the input box
<br/>
<button type='button' (click)='toggleVisibility()'>toggle</button>
 <br/>
 Field visibility is: {{fieldVisible}}

相关的 TS ：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  fieldVisible: boolean = false;
  toggleVisibility() {
    (this.fieldVisible == true) ? this.fieldVisible = false : this.fieldVisible = true;
  }
}

完成working stackblitz here