angular - 如何在 Angular 2.0 中使用 formControl 访问 native HTML Input 元素

Question

我使用的是 Angular 2.0 最终版。

我想做什么？- 我只想在输入获得焦点时显示一些通知(警告，输入要求)。或者甚至更好，当他的父级(div)有鼠标悬停事件时。

从父级(div)执行此操作很容易。只需 (focus)=showNotifications() + 一个 ngIf - 工作就完成了。

但我想将此功能封装在 show-notifications 组件中 - 并使其可重用..

鉴于我使用 @Input() 在 show-notifications 中传递了 control - 如果我可以访问 native，我可以做这两件事HTML 输入元素。您可以在 show-notifications.component.ts 中查看如何操作。这是代码:

app.component.html:

`<div>
   <label>Name: </label>
   <input formControlName="myName">
   <show-notifications [the_control]="myName" ></show-notifications>
</div>`

app.component.ts:

export class AppComponent {
    myName = new FormControl("defaultvalue",[some validators..])
}

show-notifications.component.html:

<div class="show_requirements" *ngIf="hasfocus or parentDivHasMouseHover"> // incorect code and logic - i know, but you can see the idea..

    <p *ngFor="let requirement of thisInputRequirements">{{requirement}}<p>

</div>

show-notifications.component.ts:

export class ShowNotificationsComponent {

    @Input() the_control;
    this.thisInputRequirements = // take them form firebase.
    this.thisInputCustomErrorMessages = // take them from firebase.

    // I implemented all this and works amazing but i want to do:

    //something like this:

    ngOnInit(){
        this.nativeInputElement = this.the_control.getNativeElement() // this of course doesn't work

        // the requirements are shown only when the input receive focus
        let source = Rx.DOM.focus(this.nativeInputElement);
        source.subscribe( x => this.hasFocus = true)

        // Or even better: 
        // the requirements are shown only when the parent has mouse hover
        // or any other event / endles posibilites here..

        let parent = getParentOf(this.nativeInputElement)
        let source = Rx.DOM.mouseover(parent);
        source.subscribe( x => this.parentDivHasMouseHover = true) // this will be some toggling functionality.
    }

}

问题:

如果我有 formControl (myName = the_control) 对象，我如何访问 native 元素？

是否有更好的方法在单独的组件中进行通知 - 并使其可重用？我已经在我的整个应用程序中成功地使用了它 - 以显示错误和输入要求..

注意:我尝试首先使用井号标签语法 ​​(#myInput) 传递空洞 html 输入，然后在显示通知组件内形成，我尝试执行:myInput.myName - 以访问控件，但未定义。这些控件不存在于 native 输入元素上。我需要该控件进行验证:)

Answer 1

我认为您可以使用 # 符号将元素传递给 ShowNotification Component:

export class ShowNotificationsComponent {
    @Input() the_control;
    @Input() elm;
    //...
}

然后在模板中:

<input formControlName="myName" #elm>
<show-notifications [the_control]="myName" [elm]="elm"></show-notifications>