Angular 2模板中的标签是什么意思?

我正在使用angular 2，我发现了一些类似于

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

这很有效。

然而，我不明白# searchBox的意思。我在医生那里也没找到清楚的证据。

谁能给我解释一下它是怎么工作的?

89320 次浏览
小开

当你设置这个#searchBox时，你可以在你的Typescript中得到这个输入

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

编辑

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

小开

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

  • 如果元素是普通DOM元素，则返回input元素
  • 组件或指令实例(如果它是带有组件或指令的元素)
  • 一些特定的组件或指令，比如#foo="bar"，而bar是
@Directive({ // or @Component
...
exportAs: 'bar'
})

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

@ViewChild('searchBox') searchBox:HTMLInputElement;
小开

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

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

import {Component} from 'angular2/core';


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


export class HarrysApp {}

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

# -变量声明

()事件绑定

[] -属性绑定

[()] -双向属性绑定

\{\{ }} -插值

* -结构指令

#语法可以声明在模板中引用DOM对象的局部变量名。 例如< / p > 
 <span [hidden]="harry.value">*</span>
<input type="text" #harry>
\{\{ harry.value }}
小开

从angulartraining.com:

模板引用变量是一块小宝石，它允许用Angular完成很多漂亮的事情。我通常称这个特性为“标签语法”，因为它依赖于一个简单的标签来创建对模板中元素的引用:

<input #phone placeholder="phone number">

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

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

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

注意，电话指向输入. xml对象的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}}

提交答案