角2 - 自動對焦動態輸入

Question

我有兩個組成部分，他們都是這樣

MessageComponent.ts

@Component({ 
     selector: 'Message', 
     template: ` 
      <InlineReply *ngIf="show"></InlineReply> 
      <a *ngIf="!show" (click)="toggleForm()">reply</a> 
     ` 
    }) 
    export class Message { 
     public show: boolean = false 
     toggleForm(){ 
      this.show = this.show ? false : true 
     } 
     onSub(status: boolean){ 
      this.toggleForm() 
     } 
    } 

InlineReplyComponent.ts

@Component({ 
     selector: 'InlineReply', 
     template: ` 
      <form (ngSubmit)="onSubmit()"> 
       <input name="message" placeholder="Reply..." /> 
       <button type="submit" disabled>Post</button> 
      </form> 
     ` 
    }) 
    export class InlinePost{ 
     onSubmit(): void { 
      this.submitted = true; 
     } 
    } 

它做什麼是，當你點擊MessageComponent中的回覆鏈接時，會出現一個表單。

我想要做的是，當窗體顯示，輸入就會自動對焦。任何想法？

編輯：類似的題目答案不適合此代碼的工作

Answer 1

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

@Component({ 
     selector: 'InlineReply', 
     template: ` 
      <form (ngSubmit)="onSubmit()"> 
       <input name="message" #msgFocous placeholder="Reply..." /> 
       <button type="submit" disabled>Post</button> 
      </form> 
     ` 
    }) 

    export class InlinePost implements AfterViewInit { 

     @ViewChild('msgFocous') vc: any; 

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

     onSubmit(): void { 
      this.submitted = true; 
     } 
    } 

上面的代碼工作，如果任何問題，只查一次AfterViewInit（）方法angular2.io