`#` 属性在 HTML 中的作用是什么？答案

【问题标题】：What does a `#` attribute do in HTML?`#` 属性在 HTML 中的作用是什么？
【发布时间】：2017-03-14 01:49:15
【问题描述】：

当用户单击不同的元素时，我正在编写一个处理程序来对某个元素执行某些操作。

起初我有以下内容（这是使用 Angular2，但我怀疑唯一不同的是onclick 事件的处理方式）：

        <span>
            <input type="text" id="bioName">
        </span>
        <span class="icon-pencil" (click)="editField(bioName);"></span>

...但这不起作用。然后我找到了一个以不同方式识别输入字段的示例，这对我有用。如下：

        <span>
            <input type="text" #bioName>
        </span>
        <span class="icon-pencil" (click)="editField(bioName);"></span>

很遗憾，我找不到任何可以解释这一点的东西。使用 HTML 和 Javascript 搜索“hash”和“pound”会产生太多与主题区域无关的结果。

那么# 在这种情况下做了什么？ id 在设置事件处理程序时可以不用于获取对 DOM 元素的引用吗？这叫什么，所以我可以用谷歌搜索它并阅读相应的文档？

【问题讨论】：

标签： javascript html angular

【解决方案1】：

这是 Angular2 特有的，常规 HTML 无法识别此语法，即您必须使用 id="bioName" 才能使用 CSS/JavaScript 访问标签。

Here 是关于如何在 Angular2 中使用 # 的更多信息。

【讨论】：

【解决方案2】：

Hash (#) 是在 Angular 2 模板中定义 模板变量 的语法。它用于为模板元素分配唯一标识符，您以后可以使用它来获取对组件中模板元素的引用。例如，在您的情况下，您可以使用 bioName 变量来获取对组件中输入元素的引用，并且您可以在那里做任何您想做的事情 - 获取文件名、文件大小甚至文件本身。这是使用ViewChild decorator. 完成的，您可以查看我几天前写的answer，看看模板变量主要用于什么。

【讨论】：