如何为Angular组件自身添加data-attribute？

直接在组件标签上绑定 #

不管是静态还是动态的data属性，都可以直接在使用组件的标签上通过[attr.data-*]语法绑定，Angular会自动将这些属性渲染到组件的宿主元素上：

静态data属性 #

<app-my-component data-category="user" data-status="active"></app-my-component>

动态绑定data属性 #

<app-my-component [attr.data-user-id]="currentUserId" [attr.data-role]="userRole"></app-my-component>

在组件类内部控制宿主元素的data属性 #

如果需要在组件逻辑里动态设置或修改data属性，可以通过Renderer2和ElementRef操作宿主元素（推荐用Renderer2而非直接操作nativeElement，更符合Angular最佳实践）：

import { Component, ElementRef, Renderer2, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<p>组件内容</p>'
})
export class MyComponent implements OnInit {
  // 可选：通过Input接收外部值，再映射到data属性
  @Input() itemId: string;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    // 设置静态data属性
    this.renderer.setAttribute(this.el.nativeElement, 'data-component-type', 'custom');
    
    // 动态绑定输入的值到data属性
    if (this.itemId) {
      this.renderer.setAttribute(this.el.nativeElement, 'data-item-id', this.itemId);
    }
  }
}

关于@Input的说明 #

直接声明@Input不会自动将其转化为宿主元素的data属性——@Input是组件的内部输入逻辑，和宿主元素的DOM属性是分离的。如果想用@Input同步data属性，需要手动在组件内部将输入值映射到宿主元素的data属性上。

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