关注 bootstrap 模态内的输入字段在 angular 6 中没有发生

Focus on input field inside bootstrap modal is not happening in angular 6

测试组件

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>

预期结果:没有关注输入字段。聚焦仅在页面加载时发生一次,之后每次我们打开模式时都不会发生。

尝试过的方法:使用了html5提供的autofocus属性,但没有结果。

ngOnChanges 与视图周期不同步,因为你需要在 ngAfterViewInit 回调后调用你的 .focus() 函数,或者像这样用 setTimeout 简单地包装 this.appFocus.nativeElement.focus() :

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