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