引导模态内输入字段的焦点不在角度6中发生

Question

测试组件

import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from 
'@angular/core';

@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
private isFocus: boolean;


constructor() { }
ngOnInit() { }
setFocus(focus) {
this.isFocus = focus;
}
}

测试组件HTML

<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data- 
target="#myModal"
(click)="setFocus(true)">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Modal Header</h4>
      <button type="button" class="close" data-dismiss="modal">&times; 
 </button>

    </div>
    <div class="modal-body">
      <my-modal [isFocus]="isFocus"></my-modal>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" 
 (click)="setFocus(false)">Close</button>
    </div>
  </div>

</div>
</div>

</div>

模态组件

import { Component, OnInit, Input, ElementRef, ViewChild, AfterViewInit, 
Renderer2 } from '@angular/core';
import { Console } from '@angular/core/src/console';

@Component({
selector: 'my-modal',
templateUrl: './my-modal.component.html',
styleUrls: ['./my-modal.component.scss']
})
export class MyModalComponent implements OnInit {

@Input() isFocus: boolean = false;
@ViewChild('appFocus') appFocus: ElementRef;
constructor(private renderer2: Renderer2) { }

ngOnInit() {
}

ngOnChanges() {
console.log(this.isFocus);
if (this.isFocus) {
  this.appFocus.nativeElement.focus();
}
}
}

模块化组件HTML

<div>
<h1>Modal Test</h1>
<input type="text" id="modal_input" #appFocus>
</div>

期望的结果：不会专注于输入字段。焦点仅在页面加载时发生一次，而并不是每次我们打开模式时都会发生。

尝试的方法：使用了html 5提供的autofocus属性，但没有结果。

Answer 1

[ngOnChanges与视图周期不同步，因为您需要在从ngAfterViewInit进行回调之后调用.focus（）函数，或仅将this.appFocus.nativeElement.focus()用setTimeout包装，如下所示：

setTimeout(() => this.appFocus.nativeElement.focus(), 0);