Các hashtag Angular 2 trong mẫu có nghĩa là gì?

Tôi đang làm việc với góc 2 và tôi đã tìm thấy một cái gì đó như

<input #searchBox (keyup)="search(searchBox.value)"

Và nó hoạt động.

Tuy nhiên, tôi không hiểu ý nghĩa của #searchBox . Tôi không tìm thấy bất cứ điều gì rõ ràng trong tài liệu.

Bất cứ ai có thể giải thích cho tôi làm thế nào nó hoạt động?

Cú pháp được sử dụng trong hệ thống tạo khuôn mẫu Angular 2 khai báo các phần tử DOM là các biến.

Ở đây tôi cung cấp cho thành phần của mình một URL mẫu:

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

Mẫu kết xuất HTML. Trong một mẫu bạn có thể sử dụng dữ liệu, ràng buộc thuộc tính và ràng buộc sự kiện. Điều này được thực hiện với cú pháp sau:

# - sự định nghĩa biến

() - ràng buộc sự kiện

[] - ràng buộc tài sản

[()] - ràng buộc tài sản hai chiều

{{ }} - nội suy

* - chỉ thị cấu trúc

Các #cú pháp có thể khai báo tên biến địa phương mà tham chiếu đối tượng DOM trong một mẫu. ví dụ

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}

Khi bạn đặt #searchBox này, bạn có thể nhận đầu vào này trên Bản đánh máy của mình như

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

BIÊN TẬP

Thêm một số ví dụ: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Từ angulartraining.com :

Các biến tham chiếu mẫu là một viên ngọc nhỏ cho phép có được nhiều thứ hay ho được thực hiện với Angular. Tôi thường gọi tính năng đó là cú pháp hashtag cú pháp bởi vì, tốt, nó dựa vào một hashtag đơn giản để tạo một tham chiếu đến một phần tử trong một mẫu:

<input #phone placeholder="phone number">

Những gì cú pháp trên thực hiện khá đơn giản: Nó tạo ra một tham chiếu đến  đầu vào phần tử có thể được sử dụng sau này trong mẫu của tôi. Lưu ý rằng phạm vi cho biến này là toàn bộ mẫu HTML trong đó tham chiếu được xác định.

Ví dụ, đây là cách tôi có thể sử dụng tham chiếu đó để lấy giá trị của đầu vào:

<!-- phone refers to the input element --> 
<button (click)="callPhone(phone.value)">Call</button>

Lưu ý rằng  điện thoại  đề cập đến thể hiện  đối tượng HTMLE bổ sung cho  đầu vào . Kết quả là  điện thoại  có tất cả các thuộc tính và phương thức của bất kỳ HTMLEuity nào (id, name, InternalHTML, value, v.v.)

Trên đây là một cách hay để tránh sử dụng ngModel hoặc một số loại ràng buộc dữ liệu khác ở dạng đơn giản không đòi hỏi nhiều về mặt xác nhận.

---

Điều này cũng làm việc với các thành phần?

Câu trả lời là CÓ!

... phần hay nhất của nó là chúng tôi đang tham chiếu đến thể hiện thành phần thực tế, HelloWorldComponent, vì vậy chúng tôi có thể truy cập bất kỳ phương thức hoặc thuộc tính nào của thành phần đó (ngay cả khi chúng được khai báo là riêng tư hoặc được bảo vệ, điều đáng ngạc nhiên) :

@Component({
  selector: 'app-hello',
  // ...

export class HelloComponent {
   name = 'Angular';
}

[...]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}

Nó tạo ra một biến mẫu tham chiếu

• các input yếu tố nếu phần tử là một phần tử DOM đồng bằng
• thành phần hoặc chỉ thị nếu nó là một thành phần có thành phần hoặc chỉ thị
• một số thành phần cụ thể hoặc chỉ thị nếu nó được sử dụng như #foo="bar"khi barlà

@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

Một biến mẫu như vậy có thể được tham chiếu trong các ràng buộc mẫu hoặc trong các truy vấn phần tử như

@ViewChild('searchBox') searchBox:HTMLInputElement;