Angular2，* ngIf和本地模板variables

有人可以解释下面的行为是什么：

假设我们有一个具有_model对象的Angular2组件。 然后在模板中，我们有这个

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

_model可以从头开始在ngOnInit中创build。 input字段用_model.firstNamevariables和行正确填充

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

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

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

到现在为止还挺好。 什么让我困惑的是，我添加* ngIf，我改变input字段

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

双花括号插值停止工作，因为显然本地myInputvariables没有得到初始化，即使代码中没有其他变化，_model对象仍然在onNgInit()创build，input字段仍然正常工作。 {{myInput?.className}}呈现的唯一东西是

Class:

有人可以解释一下是怎么回事，或者指向我的正确的文件？

提前致谢！

编辑：

这是一个显示有问题的问题

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

Answer 1

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

* ngIf变成/扩大到

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

所以本地模板variables#myInput只能在#myInput （即兄弟元素和/或子元素）内被引用。 因此，你将不得不把任何想要在模板中引用本地模板variables的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

---

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

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

查看API文档中的更多QueryList方法。