blocks|key|2856993|text|当您设置这个#searchBox时，您可以在您的Typescript上获得此输入，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2856994|++++@ViewChild('searchBox')+searchBox;
++++console.info(searchBox.nativeElement.value)|code-block|syntax|javascript|2856995|编辑|offset|length|style|BOLD|2856996|添加一些示例：https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview|2856997|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview^0|0|0|0|2|0|7|1G|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

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

<pre><code> @ViewChild('searchBox') searchBox;
 console.info(searchBox.nativeElement.value)
</code></pre>

EDIT

Adding some example:
<a href="https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview" rel="noreferrer">https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview</a>

blocks|key|107607|text|它会创建一个引用的模板变量|type|unstyled|depth|inlineStyleRanges|entityRanges|data|107608|107609|+input元素(如果元素是普通的DOM元素)|unordered-list-item|offset|length|style|CODE|107610|组件或指令实例(如果它是具有组件或指令的元素)|107611|某些特定的组件或指令如果它的用法类似#foo="bar"+when+bar是<代码>H29<代码>F210|107612|107613|@Directive({+//+or+@Component
++...
++exportAs:+'bar'
})|code-block|syntax|javascript|107614|这样的模板变量可以在模板绑定或元素查询中引用，如|107615|@ViewChild('searchBox')+searchBox:HTMLInputElement;|107616|entityMap^0|0|0|1|5|0|0|I|A|Y|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|11|8|@$F|12|G|13|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|E|7|15|8|@$F|16|G|17|H|I]|$F|18|G|19|H|I]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1B|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1C|8|@]|9|@]|A|$]]|$1|V|3|W|5|Q|7|1D|8|@]|9|@]|A|$R|S]]|$1|X|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|Y|$]]

It creates a template variable that references

<ul>
<li>the <code>input</code> element if the element is a plain DOM element</li>
<li>the component or directive instance if it is an element with a component or directive</li>
<li>some specific component or directive if it's used like <code>#foo="bar"</code> when <code>bar</code> is </li>
</ul>



<pre><code>@Directive({ // or @Component
 ...
 exportAs: 'bar'
})
</code></pre>

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

<pre><code>@ViewChild('searchBox') searchBox:HTMLInputElement;
</code></pre>

blocks|key|104952|text|这是Angular+2模板系统中使用的语法，该系统将DOM元素声明为变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|104953|这里我为我的组件提供了一个模板URL：|104954|import+{Component}+from+'angular2/core';

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

export+class+HarrysApp+{}|code-block|syntax|javascript|104955|模板呈现HTML。在模板中，您可以使用数据、属性绑定和事件绑定。这是通过以下语法实现的：|104956|#+-变量声明|offset|length|style|CODE|104957|()+-事件绑定|104958|[]+-属性绑定|104959|[()]+-双向属性绑定|104960|{{+}}插值|104961|*+-结构指令|104962|#语法可以声明引用模板中的DOM对象的局部变量名。例如：|104963|+<span+[hidden]="harry.value">*
+<input+type="text"+#harry>
+{{+harry.value+}}|104964|entityMap^0|0|0|0|0|0|1|0|0|2|0|0|2|0|0|4|0|0|5|0|0|1|0|0|1|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1A|8|@$M|1B|N|1C|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1D|8|@$M|1E|N|1F|O|P]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1G|8|@$M|1H|N|1I|O|P]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1J|8|@$M|1K|N|1L|O|P]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@$M|1N|N|1O|O|P]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1P|8|@$M|1Q|N|1R|O|P]]|9|@]|A|$]]|$1|10|3|11|5|6|7|1S|8|@$M|1T|N|1U|O|P]]|9|@]|A|$]]|$1|12|3|13|5|F|7|1V|8|@]|9|@]|A|$G|H]]|$1|14|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|15|$]]

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

Here I give my component a template URL:

<pre><code>import {Component} from 'angular2/core';

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

export class HarrysApp {}
</code></pre>

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

<code>#</code> - variable declaration

<code>()</code> - event binding

<code>[]</code> - property binding

<code>[()]</code> - two-way property binding

<code>{{ }}</code> - interpolation

<code>*</code> - structural directives

The <code>#</code> syntax can declare local variable names which references DOM objects in a template.
e.g.

<pre><code> &lt;span [hidden]="harry.value"&gt;*&lt;/span&gt;
 &lt;input type="text" #harry&gt;
 {{ harry.value }}
</code></pre>

blocks|key|2645616|text|来自angulartraining.com|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2645617|2645618|+模板引用变量是一个小宝石，它允许使用Angular完成许多很好的事情。我通常将该特性称为“hashtag语法”，因为它依赖于一个简单的hashtag来创建对模板中元素的引用：|blockquote|style|BOLD|2645619|2645620|2645621|上面的语法相当简单:它创建一个对输入元素的引用，稍后可以在我的模板中使用该元素。请注意，此变量的作用域是定义引用的整个HTML模板。|2645622|下面是我如何使用该引用来获取输入值的方法，例如:请注意，phone引用了+input+的HTMLElement对象实例。因此，phone拥有任何HTMLElement的所有属性和方法(id、name、innerHTML、value等)。|2645623|上面是一种很好的方法，可以避免在简单的表单中使用ngModel或其他类型的数据绑定，这些表单在验证方面不需要太多。|2645624|2645625|2645626|是否也适用于组件？|2645627|答案是肯定的！|2645628|..。最好的部分是我们获得了对实际组件实例HelloWorldComponent的引用，因此我们可以访问该组件的任何方法或属性(即使它们被声明为私有或受保护，这是令人惊讶的)：|2645629|@Component({+selector：'app-hello'，//+...导出类名称{+HelloComponent+=+'Angular'；}|2645630|..。|2645631|+{{helloComp.name}|2645632|entityMap|0|LINK|mutability|MUTABLE|url|https://blog.angulartraining.com/tutorial-the-magic-of-template-reference-variables-3183f0a0d9d1|1|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement^0|2|J|0|0|0|1|6|0|0|0|G|2|0|S|5|10|7|1R|5|18|B|1|0|0|0|0|0|9|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|D|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1K|8|@$A|1L|B|1M|H|I]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1P|8|@$A|1Q|B|1R|H|I]]|9|@]|C|$]]|$1|N|3|O|5|6|7|1S|8|@$A|1T|B|1U|H|I]|$A|1V|B|1W|H|I]|$A|1X|B|1Y|H|I]]|9|@$A|1Z|B|20|1|21]]|C|$]]|$1|P|3|Q|5|6|7|22|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|23|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|24|8|@]|9|@]|C|$]]|$1|T|3|U|5|6|7|25|8|@$A|26|B|27|H|I]]|9|@]|C|$]]|$1|V|3|W|5|6|7|28|8|@]|9|@]|C|$]]|$1|X|3|Y|5|6|7|29|8|@]|9|@]|C|$]]|$1|Z|3|10|5|6|7|2A|8|@]|9|@]|C|$]]|$1|11|3|12|5|6|7|2B|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|2C|8|@]|9|@]|C|$]]|$1|15|3|-4|5|6|7|2D|8|@]|9|@]|C|$]]]|16|$17|$5|18|19|1A|C|$1B|1C]]|1D|$5|18|19|1A|C|$1B|1E]]]]

From <a href="https://blog.angulartraining.com/tutorial-the-magic-of-template-reference-variables-3183f0a0d9d1" rel="noreferrer">angulartraining.com</a>:

<blockquote>
 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:

<pre><code>&lt;input #phone placeholder="phone number"&gt;
</code></pre>
 
 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:

<pre><code>&lt;!-- phone refers to the input element --&gt; 
&lt;button (click)="callPhone(phone.value)"&gt;Call&lt;/button&gt;
</code></pre>
 
 Note that phone refers to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" rel="noreferrer">HTMLElement</a> 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.
 
 <hr>
 
 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):

<pre><code>@Component({
 selector: 'app-hello',
 // ...

export class HelloComponent {
 name = 'Angular';
}
</code></pre>
 
 [...]

<pre><code>&lt;app-hello #helloComp&gt;&lt;/app-hello&gt;

&lt;!-- The following expression displays "Angular" --&gt;
{{helloComp.name}}
</code></pre>
</blockquote>

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

<pre><code>&lt;input #searchBox (keyup)="search(searchBox.value)"
</code></pre>

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?

What does Angular 2 hashtags in template mean?

我正在使用angular 2，我发现了类似于<input #searchBox (keyup)="search(searchBox.value)"而且它是有效的。但是，我不理解#的含义。我在文件里也没找到任何清晰的东西。有人能给我解释一下它是怎么工作的吗？

问模板中的Angular 2标签是什么意思？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模板中的Angular 2标签是什么意思？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模板中的Angular 2标签是什么意思？
EN