【教程】模板引用变量的魔力

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

<输入#手机占位符= "电话" >

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

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

<！——phone指向输入元素——>
<按钮(点击)= " callPhone (phone.value)“> < / >按钮

请注意,电话指HTMLElement对象实例的输入．结果，电话拥有任何HTMLElement的所有属性和方法(id, name, innerHTML, value等)

以上是避免使用的好方法ngModel或者其他形式的简单数据绑定，不需要太多验证。

这也适用于组件吗?

答案是肯定的!假设我们有以下条件HelloWorldComponent：

@ component ({
选择器：“app-hello”，
模板：｀
< div >
< h2 >你好{{名称}}< / h2 >
< / div >
｀
})
出口类HelloComponent {

的名字＝“角”；
｝

现在，我们可以使用“hashtag语法”获得该组件的引用，如下所示:

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

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

< app-hello# helloComp> < / app-hello ><！——下面的表达式显示“Angular”——>
{{helloComp. name}}

显然，我们不仅可以使用该语法从组件读取数据，还可以使用它进行更改。

当然，但关于它还有更多的事情要知道。大多数指令被用作属性，这意味着我们不能真正应用“标签语法”，除非我们使用相同的语法，只是稍加改变:

<形式(ngSubmit) = " onSubmit (myForm)”# myForm = "ngForm＂>

在上面的例子中，myForm是对ngForm应用于该表单的指令。

现在如果你仔细观察上面的HTML元素，你可能会想:“等一下，这里没有ngForm指令!我没有看到任何名为ngForm的属性!”你这么想是对的。

答案在于ngForm指令源代码：

@Directive ({
选择器：形式:不([ngNoForm]):没有([formGroup]), ngForm, [ngForm]”，
.．.
exportAs：“ngForm”
})

看到那个指令的选择器了吗?它适用于任何形式元素ngNoForm也不formGroup属性。正因为如此，我的形式元素自动获取ngForm指令应用。

代码中要注意的第二件有趣的事情是exportAs属性。这告诉Angular:“嘿，如果有人想用模板引用变量引用这个指令，它的名字是ngForm”。

现在我们知道这一切是如何运作的了。我们可以创建自定义指令，并使用任何类型的名称公开它们exportAs．

我叫betway必威滚球．我是谷歌的Angular开发专家，也是在角训练在那里我帮助web开发团队学习并熟练使用Angular。看看我们@AngularTraining！

如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。