如何从nativeElement中获取[adaptivePosition]属性？

以下是几种常见原因和对应解决方案：

• 如果adaptivePosition是组件的@Input()属性
  Angular的@Input()属性是组件内部绑定属性，不会自动同步到DOM元素属性上。这种情况不用getAttribute，直接访问组件实例属性即可：

  const adaptivePos = el.adaptivePosition;
  

• 如果是自定义HTML属性，注意命名格式
  HTML属性不支持驼峰命名，驼峰形式会被浏览器自动转小写，建议改用短横线分隔的命名（kebab-case）：

  1. 模板中定义属性：

     <your-element adaptive-position="top-left"></your-element>
     

  2. 获取时使用对应短横线属性名：

     const adaptivePos = el.nativeElement.getAttribute('adaptive-position');
     

  若坚持用驼峰命名，需确保属性被显式设置到DOM上：

  el.nativeElement.setAttribute('adaptivePosition', 'your-value');
  // 此时可正常获取
  const adaptivePos = el.nativeElement.getAttribute('adaptivePosition');
  

• 属性可能尚未被渲染/设置
  若属性是动态或异步赋值的，需确保调用getAttribute前属性已完成设置。比如在Angular的ngAfterViewInit钩子中执行操作：

  ngAfterViewInit() {
    const adaptivePos = this.el.nativeElement.getAttribute('adaptive-position');
    // 后续处理逻辑
  }
  

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