模板中的Angular 2 hashtags是什么意思？

Question

我正在使用角度2,我发现了类似的东西

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

它的工作原理.

但是,我不明白#searchBox的含义.我在文档中也没有发现任何明确的内容.

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

谢谢

Answer 1

它是Angular 2模板系统中使用的语法,它将dom元素声明为变量.

在这里,我给我的组件一个模板网址

import {Component} from 'angular2/core';

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

export class HarrysApp {}

模板呈现HTML.在模板中,您可以使用数据,属性绑定和事件绑定.这与以下sytax完成:

# - 变量声明

() - 事件绑定

[] - 财产约束

[()] - 双向属性绑定

{{ }} - 插值

* - 结构指令

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

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

Answer 2

当您设置此#searchBox时,您可以在您的Typescript上获得此输入

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

编辑

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

Answer 3

来自angulartraining.com:

模板引用变量是一个小宝石,它允许使用Angular完成许多好的事情.我通常将该功能称为"hashtag语法",因为它依赖于一个简单的hashtag来创建对模板中元素的引用:

<input #phone placeholder="phone number">

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

这是我如何使用该引用来获取输入的值,例如:

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

请注意,  phone  指的是输入的  HTMLElement对象实例  .因此,  手机  具有任何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}}

Answer 4

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

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

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

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

@ViewChild('searchBox') searchBox:HTMLInputElement;