angular 6 分量属性使用

Question

我正在研究 angular 6+ 代码，但我不确定这段代码是什么 #testPicker ？这是什么语法，为什么使用它？我的问题并不特定于此代码，但一般来说，此组件中#testPicker 的用途是什么。

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

Answer 1

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

例如：

<input #myname>

@ViewChild('myname') input;

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

Answer 2

在 angular 中，标签被称为 模板引用变量。 它通常用于提供从其他组件或父组件代码中访问组件（及其数据）的权限。

来自其他组件，例如：

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

来自父组件代码，使用ViewChild，Eg:

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

Answer 3

这里的 hashtag 表示 html 的引用，因此提供模板引用变量允许您将 DOM 访问到组件。

@ViewChild('divReference') divReference;

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

它就像 Java 脚本中的 document.getElementById('divReference')。

angular 6 component property use