如何使用Angular4通過元素ID設置焦點

Question

我是Angular的新手，並且試圖用它來設置ID爲「input1」的輸入焦點。我使用下面的代碼：

@ViewChild('input1') inputEl: ElementRef; 

然後在組件後：

this.inputEl.nativeElement.focus(); 

但它無法正常工作。我究竟做錯了什麼？任何幫助都感激不盡。

Answer 1

一個由@ Z.Bagley中提到的問題的答案給了我答案。我必須從@ angular/core將Renderer2導入到我的組件中。然後：

const element = this.renderer.selectRootElement('#input1'); 

setTimeout(() => element.focus(), 0); 

謝謝@MrBlaise的解決方案！

Answer 2

組件

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

@ViewChild('input1') inputEl:ElementRef; 

ngAfterViewInit() { 
     this.inputEl.nativeElement.focus(); 
} 

HTML

<input type="text" #input1>