Angular2 - 參考元件狀態

Question

我有這樣的組件

@Component({ 
    selector: 'registration-form', 
    template: ` 
     <label for="email" class="name">Email</label> 
     <input #email id="email" class="input" ngControl="email"> 
     <tooltip [visible]="if-email-input-above-is-focused"></tooltip> 
    `, 
    directives: [ 
     TooltipComponent 
    ] 
}) 

export class RegistrationForm { 

} 

，我想只顯示如果上述輸入場聚焦在工具提示組件。事情是，我不想爲所有輸入字段編寫自定義函數，但只是以某種方式引用上面的字段狀態。

什麼是最聰明的方法來做到這一點？

Answer 1

您可以使用focus和blur事件一起想：

<input id="email" class="input" ngControl="email" (focus)="visible=1" (blur)="visible=0"> 
<div *ngIf="visible">Tooltip</div> 

Plunker Example