угловое использование 6 компонентов

Question

Я искал угловой код 6+, и я не уверен, что это за фрагмент кода # testPicker ? что это за синтаксис и почему он используется? Мой вопрос относится не только к этому коду, но как вообще используется #testPicker в этом компоненте.

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

Answer 1

В угловом формате хэштег упоминается как переменная шаблона ссылки. Обычно он используется для предоставления доступа к компоненту (и его данным) из других компонентов или из кода родительского компонента.

Из других компонентов, например:

<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);
}

Документация

Answer 3

здесь хэштег означает ссылку на этот html, поэтому предоставление переменной ссылки на шаблон позволяет вам получить доступ к этой DOM для компонента.

@ViewChild('divReference') divReference;

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

это похоже на document.getElementById ('divReference') * в Java Script.