什么是Angular中的哈希符号[重复]

它的语法用于Angular 2模板系统,该系统将DOM元素声明为变量。

在这里,我给我的组件一个模板URL:

import {Component} from 'angular2/core';

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

export class HarrysApp {}

模板呈现HTML。在模板中,可以使用数据、属性绑定和事件绑定。这是通过以下语法实现的:

# -变量声明

() -事件绑定

[] -属性绑定

[()] -双向属性绑定

{{ }} 插值

* -结构指令

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

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

当你设置这个#searchBox时,你可以在Typescript上获得这样的输入

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

编辑

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

从…起 angulartraining.com :

模板引用变量 是一个小宝石,可以用Angular完成很多漂亮的事情。我通常将该功能称为hashtag语法,因为它依赖于一个简单的hashtag来创建对模板中元素的引用:

<input #phone placeholder="phone number">

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

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

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

请注意 电话 指的是 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}}

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

• 这个 input 元素,如果该元素是纯DOM元素
• 组件或指令实例(如果它是具有组件或指令的元素)
• 一些特定的组件或指令,如果使用的话 #foo="bar" 什么时候 bar 是

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

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

@ViewChild('searchBox') searchBox:HTMLInputElement;