What does Angular 2 hashtags in template mean?

问题:

I am working with angular 2 and I have found something like

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

and it works.

However, I don't understand the meaning of #searchBox. I haven't found anything clear neither in the doc.

Could anyone explain to me how it works?

回答1:

It's syntax used in the Angular 2 templating system which declares dom elements as variables.

here i give my component a template url

import {Component} from 'angular2/core';

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

export class HarrysApp {}

Templates render HTML. In a template you can use data, property binding and event binding. This is occomplished with the following sytax:

# - variable declaration

() - event binding

[] - property binding

[()] - two-way property binding

{{ }} - interpolation

* - structural directives

The # syntax can declare local variable names which references DOM objects in a template. E.g.

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

回答2:

When you set this #searchBox, you can get this input on your Typescript like

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

EDIT

Adding some example: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

回答3:

From angulartraining.com:

Template reference variables are a little gem that allows to get a lot of nice things done with Angular. I usually call that feature “the hashtag syntax” because, well, it relies on a simple hashtag to create a reference to an element in a template:

<input #phone placeholder="phone number">

What the above syntax does is fairly simple: It creates a reference to the input element that can be used later on in my template. Note that the scope for this variable is the entire HTML template in which the reference is defined.

Here’s how I could use that reference to get the value of the input, for instance:

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

Note that phone refers to the HTMLElement object instance for the input. As a result, phone has all of the properties and methods of any HTMLElement (id, name, innerHTML, value, etc.)

The above is a nice way to avoid using ngModel or some other kind of data binding in a simple form that does not require much in terms of validation.

---

Does this also work with components?

The answer is YES!

... the best part of it is that we’re getting a reference to the actual component instance, HelloWorldComponent, so we can access any methods or properties of that component (even if they are declared as private or protected, which is surprising):

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

export class HelloComponent {
   name = 'Angular';
}

[...]

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

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

回答4:

It creates a template variable that references

• the input element if the element is a plain DOM element
• the component or directive instance if it is an element with a component or directive
• some specific component or directive if it's used like #foo="bar" when bar is

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

Such a template variable can be referenced in template bindings or in element queries like

@ViewChild('searchBox') searchBox:HTMLInputElement;