Question

在 #elementReference 与 * ngIf 一起使用的角度2中，即使在 * ngIf 之后，对元素的引用仍为undefined表达式计算结果为true。在以下示例中，不会显示input's值。

<input *ngIf="true" type="text" #myRef (input)="a = 'b';" class="form-control input-lg">
<pre> {{ myRef?.value }} </pre>

但是接下来会工作（让我感到惊讶）。

<div *ngIf="true">
          <input type="text" #myRef (input)="a = 'b';" class="form-control input-lg">
          <pre> {{ myRef?.value }} </pre>
      </div>

我的问题是，当与* ngIf like指令一起使用时，如何从模板中的任何位置获取元素的#reference。

Answer 1

The documentation建议不要在可能进行数据绑定的情况下使用elementRef：

当需要直接访问DOM时，使用此API作为最后的手段。请使用Angular提供的模板和数据绑定。

使用数据绑定的解决方案：

<input *ngIf="true" type="text" [(ngModel)]="myModel" (input)="a = 'b';" class="form-control input-lg">
<pre> {{ myModel }} </pre>

Answer 2

这种行为可能是由

引起的

<div *ngIf="show"></div>

是syntactic sugar

<template [ngIf]="show">
  <div></div>
</template>

Template reference variables只能用于

在同一元素，兄弟元素或任何子元素上。

你的例子看起来像这样：＃/ p>

<template [ngIf]="true">
  <input type="text" #myRef (input)="a = 'b';" class="form-control input-lg">
</template
<pre> {{ myRef?.value }} </pre>

正如您所看到的，引用变量#myRef不是试图使用它的pre元素的兄弟，因此它不起作用。

与angular2中的* ngIf一起使用时，#elmentRef仍未定义

2 个答案: