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

Angular2 - 参考元素状态

Angular2 - reference element state

javascript

angular2-forms

angular2-template

angular