Javascript 模板中的 Angular 2 主题标签是什么意思？

What does Angular 2 hashtags in template mean?

提问by ackuser

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

我正在使用 angular 2，我发现了类似的东西

<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.

但是，我不明白#searchBox的含义。我在文档中也没有找到任何明确的内容。

Could anyone explain to me how it works?

谁能向我解释它是如何工作的？

回答by Harry

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

它是 Angular 2 模板系统中使用的语法，它将 DOM 元素声明为变量。

Here I give my component a template URL:

在这里，我给我的组件一个模板 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 accomplished with the following syntax:

模板呈现 HTML。在模板中，您可以使用数据、属性绑定和事件绑定。这是通过以下语法完成的：

#- 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.

该#语法可以声明引用模板中的 DOM 对象的局部变量名称。例如

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

回答by Matheus Martins

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

当您设置此#searchBox 时，您可以在打字稿上获得此输入，例如

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

EDIT

编辑

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

添加一些示例：https: //plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

回答by ruffin

From angulartraining.com:

来自angulartraining.com：

Template reference variablesare 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?inputelement 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?HTMLElementobject 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}}

模板引用变量是一个小宝石，它允许使用 Angular 完成很多不错的事情。我通常称该功能为“主题标签语法”，因为它依赖于一个简单的主题标签来创建对模板中元素的引用：

<input #phone placeholder="phone number">

上述语法的作用相当简单：它创建了一个对? 稍后可以在我的模板中使用的输入元素。请注意，此变量的范围是定义引用的整个 HTML 模板。

下面是我如何使用该引用来获取输入的值，例如：

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

注意？电话？指的是？HTMLElement对象实例为？输入。其结果，？phone具有任何 HTMLElement 的所有属性和方法（id、name、innerHTML、value 等）

上面是一种很好的方法，可以避免在不需要太多验证的简单形式中使用 ngModel 或其他类型的数据绑定。

---

这也适用于组件吗？

答案是肯定的！

...最好的部分是我们获得了对实际组件实例 HelloWorldComponent 的引用，因此我们可以访问该组件的任何方法或属性（即使它们被声明为私有或受保护，这很令人惊讶） ：

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

export class HelloComponent {
   name = 'Angular';
}

[...]

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

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

回答by Günter Z?chbauer

It creates a template variable that references

它创建了一个引用的模板变量

• the inputelement 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 baris

• 所述input如果元素是一个普通的DOM元素元件
• 组件或指令实例，如果它是具有组件或指令的元素
• 一些特定的组件或指令，如果它像使用#foo="bar"时bar是

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

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

这样的模板变量可以在模板绑定或元素查询中引用，如

@ViewChild('searchBox') searchBox:HTMLInputElement;