HTML中的`#`属性有什么作用？

Question

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

起初我有以下(这是使用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元素的引用？这叫什么,所以我可以google它并阅读相应的文档？

Answer 1

这是Angular2特定的,常规HTML无法识别此语法,即您必须使用id="bioName"以便使用CSS/JavaScript访问标记.

以下是有关如何#在Angular2中使用的更多信息.

Answer 2

Hash(#)是在Angular 2模板中定义模板变量的语法.它用于为模板元素分配唯一标识符,您可以在以后使用它来获取对组件中模板元素的引用.例如,在您的情况下,您可以使用bioName变量来获取组件中输入元素的引用,您可以随意执行任何操作 - 获取文件名,文件大小甚至文件本身.这是使用ViewChild装饰器完成的.您可以查看我几天前写的答案,看看主要用于哪些模板变量.