javascript - Como focar em um campo?

Atualizei do Angular 2 para o Angular 4 e na documentação está escrito para usar o Renderer2 em vez do Renderer, que está obsoleto.

Agora estou analisando o código-fonte do Renderer, mas não consigo encontrar uma maneira de invocar o método focus() como costumava fazer.

Método antigo:

this.renderer.invokeElementMethod(element, 'focus', []);

Qual é a nova abordagem?

EDITAR

E se o elemento em que estou focando for obtido via QuerySelector?

Por exemplo:

let inputField = document.querySelectorAll('.dialog input');
if ( inputField[0] ) {
   inputField[0].focus();
}

Como é obtido via QuerySelector, o método focus() não existe nele.

Resposta #1

O invokeElementMethod está obsoleto e não voltará no novo renderizador. Para definir o foco em um elemento, você pode simplesmente usar isto agora:

element.nativeElement.focus();

Se você está usando document.querySelectorAll, você está fazendo algo de uma maneira não convencional no Angular, e deveria encontrar outra forma de fazer isso. Se não houver outra maneira de fazer, então o mesmo princípio se aplica. O método focus() é javascript puro, então você pode usá-lo dentro do Angular2/TypeScript. Porém, certifique-se de usar o querySelectorAll dentro do hook ngAfterViewInit do componente:

ngAfterViewInit() {
   let inputField: HTMLElement = <HTMLElement>document.querySelectorAll('.dialog input')[0];
   inputField && inputField.focus();
}

Resposta #2

Você também pode usar o método selectRootElement do Renderer2.

Por exemplo:

constructor(private renderer: Renderer2) {}

this.renderer.selectRootElement('#domElementId').focus()

, onde domElementId é id='domElementId' em seu HTML