Actualicé de Angular 2 a Angular 4 y en los documentos está escrito para usar Renderer2 en lugar de Renderer , que está obsoleto.
Ahora estoy buscando en la fuente de Renderer, pero no puedo encontrar una manera de invocar el método focus() como solía hacerlo.
Viejo método:
this.renderer.invokeElementMethod(element, 'focus', []);
¿Cuál es el nuevo enfoque?
EDITAR
¿Qué sucede si el elemento en el que me estoy enfocando se obtiene a través QuerySelector ?
Por ejemplo:
let inputField = document.querySelectorAll('.dialog input'); if ( inputField[0] ) { inputField[0].focus(); } Dado que se obtiene a través de QuerySelector , el método focus() no existe en él.
invokeElementMethod está en desuso y no encontrará su camino de regreso al nuevo renderizador. Para establecer el foco en un elemento, simplemente puede usar esto ahora:
element.nativeElement.focus(); Si está utilizando document.querySelectorAll , está haciendo algo que no es angular, y debería encontrar otra forma de hacerlo. Si no hay otra manera de hacerlo, se aplica el mismo principio. El método focus() es javascript simple, por lo que puede usarlo dentro de angular2/typescript. Sin embargo, asegúrese de hacer querySelectorAll dentro del gancho ngAfterViewInit del componente:
ngAfterViewInit() { let inputField: HTMLElement = <HTMLElement>document.querySelectorAll('.dialog input')[0]; inputField && inputField.focus(); }También puede usar el método selectRootElement de Renderer2 .
Por ejemplo:
constructor(private renderer: Renderer2) {} this.renderer.selectRootElement('#domElementId').focus(), donde domElementId es id='domElementId' en tu html
template reference variable :#inlineEditControl <input #inlineEditControl class="form-control form-control-lg" [placeholder]="label"> @ViewChild('inlineEditControl') inlineEditControl: ElementRef; // input DOM element this.inlineEditControl.nativeElement.focus();