角6分量属性使用

Question

我正在查看角度6以上的代码，但不确定这是什么代码 #testPicker ？这个语法是什么，为什么使用？我的问题不是特定于此代码，而是通常在此组件中使用#testPicker是什么。

 <app-name-picker [readonly]="isValidForm()" [value]="selectedUser" (selectionChange)="selectUser($event)" #testPicker></app-name-picker>

Answer 1

在Hash标签中，井号称为模板参考变量。 通常用于提供从其他组件或父组件代码内访问组件（及其数据）的权限。

从其他组件中，例如：

<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

从父组件代码中，使用ViewChild，例如：

@ViewChild('phone') phoneNumber;
ngAfterViewInit(){
  callPhoneNumber(this.phoneNumber.nativeElement.value);
}

进一步的阅读和参考：https://angular.io/guide/template-syntax#template-reference-variables--var-

Answer 2

我们使用这种声明性方法来机会直接访问视图中的元素。

例如：

<input #myname>

@ViewChild('myname') input;

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

Documentation

Answer 3

这里的＃标签是对该html的引用，因此给Template Reference Variable提供模板引用变量使您可以将该DOM访问Component。

@ViewChild('divReference') divReference;

ngAfterViewInIt(){
console.log(this.divReference);
}

类似于Java脚本中的 document.getElementById（'divReference'）。