配对或连接输入和按钮元素与角元素
您可以使用与添加按钮配对的元素。
标题之后，将以下内容插入英雄组合模板中：
<div>
<label for="new-hero">Hero name: </label>
<input id="new-hero" #heroName />
<!-- (click) passes input value to add() and then clears the input -->
<button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
Add hero
</button>
</div>
在这里，我不了按钮元素。
基本上，该输入元素中的＃＃＃＃＃＆lt;语法。我知道这不是已经声明的id。
I was following the tutorial Tour of Heroes. While adding a new hero they say
You can use an element paired with an add button.
Insert the following into the HeroesComponent template, after the heading:
<div>
<label for="new-hero">Hero name: </label>
<input id="new-hero" #heroName />
<!-- (click) passes input value to add() and then clears the input -->
<button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
Add hero
</button>
</div>
Here I don't understand what is #heroName inside in input element (what is it called) and how does it help in pairing that input element with the button element.
Basically, what is that #<keyword> syntax within that input element. I know that it is not the id as that is already declared.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
要回答问题，它是对输入的参考。您可以在此处找到更多详细信息：
https://angular.io/guide/guide/template-template-reference-variables-variables-
在教程上下文中，它是对输入元素的引用。它有助于将其与按钮配对，以便能够访问其值，而无需实际定义组件中的变量并尝试直接更新模板。这有助于您“跳过”步骤，并且实际上可以直接访问该值。
在某些情况下，模板参考变量可能会非常方便，例如
在上面的示例中通常在Angular材料中使用（为组件调用功能），您将Menucompents变量绑定到“ Mat-Menu”组件，在这种情况下，您可以访问所有变量，公共方法。在这种情况下，我们可以从MAT-MENU组件中调用“关闭”方法。
让我知道这是否仍然不清楚，我可以尝试为您提供更多示例和解释
To answer the question, it's a reference to the input. You can find more details here:
https://angular.io/guide/template-reference-variables
In the tutorial context, it's a reference to the input element. It helps to pair it with a button to be able to access it's value, without having to actually define a variable in the component.ts and trying to update the template directly. This help you "skip" a step, and actually have direct access to that value.
Template reference variables can become very handy in certain cases and are commonly used for example in angular material ( to call a function for a component )
In the above example, you bind the menuComponent variable to "mat-menu" component, in which case you can access all the variables, public methods of such. In that case we can call "close" method from the mat-menu component.
Let me know if this is still unclear and I can try to give you more examples and explanation