html - 在 Angular 中添加和删除类

Question

我想在单击时为 li 元素添加背景颜色，但是当我单击另一个 li 元素时，之前的 li 元素背景颜色保持不变。

组件.html

<div class="col-md-3 categories">
  <h3>News By Type</h3>
  <ul>
    <li class="cat" id="cat_{{i}}" *ngFor="let category of categories; let i = index" (click)="sortNewsItems($event,category,i)"><img src="../assets/images/news.jpg" width="70"><h4>{{category}}</h4></li>
  </ul>
</div>

组件.ts

sortNewsItems(event,cat,index) {
  event.target.classList.add('cat_active');
}

Answer 1

你应该srcElement使用$event

sortNewsItems(event,cat,index) {
  event.srcElement.classList.add('cat_active');
}

阅读这个答案并使用它的演示

Answer 2

我知道这是一个旧帖子，但以防万一。当元素上已有多个类时，您可能只想添加或删除额外的类，您可以这样做：

在元素上：

<div #element </div>

在 component.ts 上

@ViewChild('element') element: ElementRef;

然后你可以添加类或删除它们

this.element.nativeElement.classList.add("newclass");
this.element.nativeElement.classList.remove("newclass");

Answer 3

在将新的“cat_active”类添加到选定元素之前，从所有兄弟元素中删除“cat_active”类。

组件.html

<li #li class="cat" *ngFor="let category of categories;" (click)="sortNewsItems($event)">

组件.ts

@ViewChildren('li') livs: QueryList<any>;

constructor(private elementRef: ElementRef) { }

sortNewsItems(event) {
    this.livs.forEach(liv => liv.nativeElement.children[0].classList = []);
    event.target.classList.add('cat_active');
}

我希望它可能会有所帮助。

Answer 4

在 html 元素中使用 ngStyle 而不是直接类绑定。

组件.html

<div class="col-md-3 categories">
  <h3>News By Type</h3>
  <ul>
    <li [ngStyle]="setListItemStyle(category)" class="cat" id="cat_{{i}}" *ngFor="let category of categories; let i = index" (click)="sortNewsItems($event,category,i)"><img src="../assets/images/news.jpg" width="70"><h4>{{category.label}}</h4></li>
  </ul>
</div>

组件.ts

  activeListItem: any = null;
  categories: any[] = [{ id: 1, label: 'Test label 1' }, { id: 2, label: 'Test label 2' }];

  sortNewsItems(event, category, i) {
    event.stopPropagation();
    this.activeListItem = category;
  }

  setListItemStyle(category) {
    return { 'background-color': this.activeListItem && this.activeListItem.id == category.id ? '#fff000' : null };
  }

Answer 5

document.querySelector(".menu-open-btn a").onclick = function addNewClass() {
    document.querySelector(".mobile-header").classList.add("newClass");
}

Answer 6

我读到使用 srcElement 不是一个“很好”的做法。最好使用renderer2。

Answer 7

<any-element [ngClass]="{selected: isSelected}">
...
</any-element>

或者

<any-element [ngClass]="{selected: isSelected, disabled: isDisabled}">
...
</any-element>

Answer 8

当单击类别 li 并根据以下条件添加活动类时，我只是获取了一个变量并为其设置了类别名称。最后我把它设置成我想要的。谢谢大家的支持。

组件.html

<li class="cat" *ngFor="let category of categories; let i = index" (click)="sortNewsItems(category,i)" [ngClass]="{'cat_active':toggleClass === category}"><img src="../assets/images/news.jpg" width="70"><h4>{{category}}</h4></li>

组件.ts

toggleClass:string;

sortNewsItems(cat,index) {
  this.toggleClass = cat;
}