Из этого учебника Angular.io я показываю:

<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

Где я не понимаю этого: #searchBox. Может кто-нибудь объяснить?

Хештег напоминает мне о селекторе jQuery для идентификаторов, но я не совсем уверен, что это значит здесь, так как у нас уже есть идентификатор.

5
gsamaras 5 Сен 2017 в 08:50

6 ответов

Лучший ответ

Это ссылочная переменная шаблона. Подробнее см. Здесь: https://angular.io/guide/ шаблон - синтаксических # шаблон - ссылки -переменные - вар

1
Szabolcs 2 Ноя 2019 в 12:38

Это ссылочная переменная шаблона, они обычно объявляются #variable и могут использоваться в любом месте шаблона.

В этом конкретном сценарии #searchBox объявляет переменную, которая будет хранить значение того, что введено в текстовое поле.

Более того, вы также можете увидеть использование этой переменной шаблона #searchBox в функции keyup, где она используется для чтения самого значения. Таким же образом вы можете использовать эту переменную в любом месте вашего кода.

1
Ajinkya Dhote 5 Сен 2017 в 05:59

Простыми словами .

  1. Она называется ссылочной переменной шаблона (она же ссылочная переменная), поскольку она объявлена в шаблоне и часто используется в Javascript (машинопись).

  2. Ссылочная переменная шаблона похожа на var id (, но не идентична ), которую можно использовать для ссылки практически на любой элемент DOM (элемент HTML, Directive, Component) в шаблоне.

  3. Ссылка на переменную шаблона также доступна в Reactjs.

  4. В angular вы можете использовать #somename или ref-somename для объявления ссылочной переменной шаблона.

Итак, как мне использовать эти TRV (переменная шаблона ссылки), именно тогда вы должны изучить библиотечную документацию

4
nivas 5 Сен 2017 в 06:18

Он используется в качестве селектора элемента в компоненте ...

< Сильный > component.html

<input #searchBox id="search-box" (keyup)="search(searchBox.value)" value='4'/>

< Сильный > component.ts

@ViewChild('searchBox') input; 

ngAfterViewInit() {
  console.log(input.nativeElement); // logs the javascript object for the element.
  console.log(this.input.nativeElement.value); // logs 4
}
1
Zze 5 Сен 2017 в 05:54

Ссылка на шаблон используется, чтобы дать вашему управляющему классу ссылку на элемент. #searchBox даст вам ссылку на ваш элемент ввода, если вы определите его в машинописном тексте следующим образом:

@ViewChild('searchBox') searchBox;

Теперь вы можете использовать эту ссылку для управления или запроса от вашего элемента ввода, например:

this.searchBox.nativeElement.focus();
1
Carsten 5 Сен 2017 в 05:56

Ссылочная переменная шаблона с помощью окна выбора

<select #myColor (change) = "setData(myColor.value)"></select> 

Посмотрите на фрагмент кода, #myColor является ссылочной переменной шаблона. MyColor.value может получить доступ к выбранному значению поля выбора.

Ссылочная переменная шаблона с NgForm

Как получить доступ к директиве NgForm, используя переменную ссылки на шаблон

<form (ngSubmit)="onSubmitPersonForm(myForm)" #myForm="ngForm">
    <input name="name" required [(ngModel)]="person.pname">
    <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>  

ngSubmit . Позволяет связывать угловые выражения с событием отправки формы. Здесь на форме submit будет вызван метод компонента onSubmitPersonForm.

ngForm : это вложенный псевдоним директивы формы

Здесь мы используем переменную ссылки на шаблон для ngForm как # myForm = "ngForm". Теперь мы можем использовать myForm вместо ngForm, например, для проверки правильности формы, и мы также можем использовать ее в нашем угловом

Ссылочная переменная шаблона с использованием текстового поля ввода

Ссылочная переменная шаблона - это переменная, с помощью которой мы можем получить доступ к свойствам DOM. В нашем примере мы используем следующие свойства DOM поля ввода.

<input type="text" #mobile placeholder="Enter Mobile Number">

В вышеприведенном текстовом поле ввода #mobile - переменная ссылки на шаблон. Чтобы получить свойства DOM, мы делаем следующее.

mobile.placeholder : он даст заполнитель нашего текстового поля, если мы его указали.

mobile.value : он даст значение нашего текстового поля.

mobile.type : он даст тип элемента ввода. В нашем примере тип это текст.

1
HD.. 5 Сен 2017 в 06:03