Фокус на поле ввода внутри начальной загрузки не происходит в угловых 6 - PullRequest
Новая
       15

Фокус на поле ввода внутри начальной загрузки не происходит в угловых 6

1 голос
/ 05 октября 2019

Тестовый компонент 

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, но не получил результата.

1 Ответ

0 голосов
/ 05 октября 2019

ngOnChanges не синхронизирован с циклом просмотра, для этого вам нужно будет вызвать вашу функцию .focus () после обратного вызова из ngAfterViewInit или просто обернуть this.appFocus.nativeElement.focus() с помощью setTimeout следующим образом: 

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