AngularJS2：如何將焦點輸入像document.getElementById（..）。焦點在JavaScript中？

Question

我正在AngularJS2中編寫登錄表單，並且我希望光標在用戶或密碼返回false時將用戶名輸入重點關注。我該怎麼做？

<input type="text" class="form-control" #inputUsername placeholder="Username" autofocus ngControl="username" [(ngModel)]="username"> 
<input type="password" class="form-control" #inputPassword placeholder="Password" ngControl="password" [(ngModel)]="password"> 

this.loginService.getAuth(username, password) 
    .subscribe(auth => { 
    if (auth == true) { 
     ???? 
    } else { 
     ???? 
    } 
    }); 

Answer 1

使用指令就像https://stackoverflow.com/a/34573219/217408解釋和修改了一下：

@Directive({ 
    selector : '[focusable]' 
}) 
class Focusable { 
    constructor(public renderer: Renderer, public elementRef: ElementRef) {} 

    focus() { 
    this.renderer.invokeElementMethod(
     this.elementRef.nativeElement, 'focus', []); 
    } 
} 

然後使用它像

<input focusable type="text" class="form-control" #inputUsername placeholder="Username" autofocus ngControl="username" [(ngModel)]="username"> 
<input type="password" class="form-control" #inputPassword placeholder="Password" ngControl="password" [(ngModel)]="password"> 

不要忘了將它添加到`指令：[可聚焦]

您可以查詢該指令像

@ViewChild(Focusable) focusable:Focusable; 

... 
if(auth == true) { 
    ... 
} else { 
    this.focusable.focus(); 
} 

Plunker example