Angular - 模版变量（# 语法）Angular 的模版变量就是在模版中用 # 声明一个变量，我习惯叫它井号语法，

Angular 的模版变量就是在模版中用 # 声明一个变量，我习惯叫它井号语法，有很多用法，这里给出我写的 todomvc 里的一些示例。

拿到 input 的值填入

<input #newItem (keyup.enter)="addItem(newItem.value); newItem.value = ''" />

ngIf 的 else 块

<h2>
  {{ items.length }}
  <span *ngIf="items.length === 1; else elseBlock">item</span>
  <ng-template #elseBlock>items</ng-template>
</h2>

操作 DOM

此处功能是双击显示编辑框后，自动聚焦。

<input #editInput />

使用 @ViewChild 装饰器获取模版变量的引用，从而访问和操作 DOM：

export class AppComponent {
  @ViewChild('editInput', { static: false }) editInput: ElementRef<HTMLInputElement>

  editTodo(todo: Todo) {
    // ....

    // 通过 nativeElement 属性访问 DOM，并聚焦
    // 因为双击后才会显示编辑框，所以使用 setTimeout 等待 DOM 渲染完成
    setTimeout(() => this.editInput.nativeElement.focus())
  }
}