使用@ViewChild獲取輸入的.nativeElement將返回'undefined'

Question

我在angular2中創建了以下表單：

import {Component, ElementRef, ViewChild, AfterViewInit} from "angular2/core";
import {Observable} from "rxjs/Rx";
import {ControlGroup, Control, Validators, FormBuilder} from "angular2/common";

@Component({
    selector: "ping-pong",
    template: `
                  <form
                     name="someform"                             [ngFormModel]="form">
                      <div class="form-group">
                          <input                                 
                              id="foobar"                        #foobar="ngForm"   <-- without ="ngForm" everything works fine
                              type="text"                        ngControl="foobar"
                              value=""
                              class="form-control"
                          />
                      </div>
                  </form>
              `,
    styles: [`
                  form {
                      width: 300px;
                  }
              `]
})

export class ChangepswdFormComponent implements AfterViewInit {
    @ViewChild("foobar") foobar: ElementRef;
    private form: ControlGroup;

    public constructor(formBuilder: FormBuilder) {
        this.form = formBuilder.group({
            foobar: [""]
        });
    }

    public ngAfterViewInit(): void {
        console.log(this.foobar.nativeElement);
        //observable doesnt work because nativeelement is undefined
        //Observable.fromEvent(this.foobar.nativeElement, "keyup").subscribe(data => console.log(data));
    }
}

在ngAfterViewInit內部，nativeElement位未定義，除非我從#foobar =“ngForm”中刪除=“ngForm”部分。我通過進行以下調整克服了這個問題：

import {Component, ElementRef, ViewChild, AfterViewInit} from "angular2/core";
import {Observable} from "rxjs/Rx";
import {ControlGroup, Control, Validators, FormBuilder} from "angular2/common";

@Component({
    selector: "ping-pong",
    template: `
                  <form
                     name="someform"                             [ngFormModel]="form">
                      <div class="form-group">
                          <input                                 
                              id="foobar"                        #foobar="ngForm"     #tralala
                              type="text"                        ngControl="foobar"
                              value=""
                              class="form-control"
                          />
                      </div>
                  </form>
              `,
    styles: [`
                  form {
                      width: 300px;
                  }
              `]
})

export class ChangepswdFormComponent implements AfterViewInit {
    @ViewChild("tralala") foobar: ElementRef;
    private form: ControlGroup;

    public constructor(formBuilder: FormBuilder) {
        this.form = formBuilder.group({
            foobar: [""]
        });
    }

    public ngAfterViewInit(): void {
        console.log(this.foobar.nativeElement);
        let keyups = Observable.fromEvent(this.foobar.nativeElement, "keyup");
        keyups.subscribe(data => console.log(data));
    }
}

換句話說，我用一個與ngForm無關的輔助主題標簽（#tralala）豐富了輸入元素。即使這個解決方案有效，但我感覺不舒服，因為它感覺我正在應用一個小的黑客。 我們應該能夠以更優雅/更直接的方式通過@ViewChild或通過this.form.controls（或其他類似的東西）檢索文本框的本機元素，而不使用像我使用的那樣的變通方法。 但我無法弄明白具體如何。

快速附錄：如果有任何重要性，我正在使用Angular2 2.0-beta7。

Answer 1

只需添加另一個模板變量

#foobar="ngForm" #foobarElement

@ViewChild("foobarElement") foobar: ElementRef;

使用="ngForm" ，模板變量有不同的用途，不適用於@ViewChild()

如果您認為這仍然有用，請考慮創建錯誤報告。