есть событие для обнаружения изменения атрибута класса в элементе шаблона в угловых?

Question

Если вы используете такую ​​среду, как bootstrap, вы знаете, что классы элементов меняются в зависимости от действий или размера области просмотра ...

Есть ли в Angular событие, позволяющее нам определять, когда классы элемента меняются?

Например, имея загрузочную навигационную панель, каждый раз, когда у нее есть класс show в своем списке классов, я хочу console.log("show"), и каждый раз, когда у него нет класса show в своем списке классов, я хочу console.log("hide"). Другими словами, я хочу подписаться на изменение класса элемента.

Answer 1

Вы можете обнаружить изменение класса, используя EventEmitter для emit изменения. Вам нужно будет subscribe до того, как начать излучение. Смотрите следующий пример, надеюсь, это поможет:

import { Component, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <p [ngClass]="{ active: active }">
      The active text
    </p>
    <button (click)="isActive($event)">change class</button>
  `,
  styles: [`
    .active {
      background-color: yellow;
    }
  `]
})

export class AppComponent {
  active = false;
  activate: EventEmitter<boolean> = new EventEmitter();

  isActive(event) {
    this.active = !this.active;
    this.activate.emit(this.active);
  }

  ngOnInit() {
    this.activate.subscribe((data) => {
      console.log('active: ' + data);
    })
  }
}