Question

有人可以解释以下行为背后的原因吗？

假设我们有一个具有_model对象的Angular 2组件。然后在模板中我们有：

<form>
    <input type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test2"  #myInput >
    <br>Class: {{myInput?.className}}
</form>

从_model开始从头开始创建ngOnInit()。输入字段已正确填充_model.firstName变量和行：

<br>Class: {{myInput?.className}}

在模板中正确呈现以下内容：

Class: form-control ng-untouched ng-pristine ng-invalid。

到目前为止一切顺利。令我困惑的是，我添加*ngIf并将输入字段更改为

的那一刻

<input *ngIf="_model" type="text" class="form-control" required [(ngModel)]="_model.firstName" ngControl="test2"  #myInput >

双花括号插值停止工作，因为即使代码中没有其他内容发生变化，显然本地myInput变量也未初始化，_model object仍在onNgInit()中创建，输入字段仍然正常工作。 {{myInput?.className}}呈现的唯一内容是

Class:

有人可以解释发生了什么和/或指出正确的文件吗？

修改

以下是显示相关问题的Plunker。

创建错误报告https://github.com/angular/angular/issues/8087

Answer 1

我们可以在同一元素，兄弟元素或任何子元素上引用本地模板变量。 - ref

* ngIf变为/扩展为

<template [ngIf]="_model">
    <input type="text" class="form-control" required [(ngModel)]="_model.firstName"
     ngControl="test1" #myInput>
</template>

因此，本地模板变量#myInput只能在模板块内引用（即兄弟元素和/或子元素）。因此，您必须在模板中放置任何想要引用本地模板变量的HTML：

<template [ngIf]="_model">
   <input type="text" class="form-control" required [(ngModel)]="_model.firstName"
    ngControl="test1"  #myInput >
   <br>Class (this works): {{myInput?.className}}
</template>

Plunker

如果您需要在与输入相关的模板块之外显示某些内容，请使用@ViewChildren('myInput') list:QueryList<ElementRef>然后订阅更改：

ngAfterViewInit() {
   this.list.changes.subscribe( newList =>
      console.log('new list size:', newList.length)
   )
}

查看API doc中的更多QueryList方法。

* ngIf和本地模板变量

1 个答案: