是否可以在本地以角度添加ID到HTML-Tag

Question

早上好，

我什至没有问题，但我很好奇，是否可以在本地将ID添加到HTML标记中。这样，只有定义它的组件才能访问它？我的想法是设置id并稍后在JS函数中访问它。但是，恐怕在调用document.getElementById（this.configurationHeader.id.toString（））;时可能导致多个结果。

（（如下面代码中的按钮）

亲切的问候保罗

changeFavoriteApperance() {
  let _isFavorite = this.browserStorage.idIsFavorite(this.configurationHeader.id);
  let _button = document.getElementById(this.configurationHeader.id.toString());
  let _id = [];
  _id.push(this.configurationHeader.id);

  _button.style.color = _isFavorite ? 'yellow' : 'inherit';
}

<div class="container">
  <h4 class="child name">{{configurationHeader.name}}</h4>
  <p class="child description">{{configurationHeader.description}}</p>
  <button name="favorite" class="favorite" (click)="this.changeFavoriteStatus()" id={{this.configurationHeader.id}}>⚝</button>
</div>

Answer 1

您需要将插值括在双引号中。并且不需要this关键字。

<button 
  name="favorite" 
  class="favorite"
  (click)="changeFavoriteStatus()"
  id="{{configurationHeader.id}}"
>⚝</button>

或者，您可以使用[id]="configurationHeader.id"绑定到属性属性。

但是在Angular中，有更好的方法来处理标签特定的属性，而不是动态修改id。