如何在Angular模板中直接访问HTML元素属性值？

你的写法是可以正常运行的，但其实有更简洁的实现方式，不用借助组件里的ViewChild：

• 直接使用模板变量#next访问元素属性，不需要在组件类里定义nextButton：

  <button
    #next
    accesskey="Y"
    (click)="clickHandler()">
      Do something ({{next.accessKeyLabel}})
  </button>
  

如果坚持用ViewChild的方式，你的代码逻辑也是没问题的，但要注意：

• Angular默认在ngAfterViewInit钩子后初始化视图查询结果，模板中绑定会自动等待这个时机，所以一般不会出现未定义的问题
• 直接访问nativeElement会跳过Angular的抽象层，虽然这里用属性读取没什么风险，但如果是修改DOM的话不推荐

至于是否需要创建单独字段？完全没必要，除非你需要在组件的业务逻辑中复用这个属性值，或者需要对其做格式化、转换处理，否则直接在模板中引用元素属性就够了。

另外补充一点：accessKeyLabel是浏览器原生提供的属性，不同浏览器的显示格式可能有差异（比如Windows下显示Alt+Y，Mac下显示Option+Y），这属于浏览器行为，Angular无法干预。

内容的提问来源于stack exchange，提问作者Anton