Угловая 2 - Постоянное обновление NgClass

Question

У меня есть компонент карты, на котором есть вставка видеокомпонентов. Клавиатура и видеокомпонент переключают классы при щелчке видео, поэтому видео становится полноэкранным с наложением карты на нем.

Я обновляю класс обоих компонентов с помощью NgClass, но я заметил, что раздел класса элемента карты мерцает в инспекторе при запуске моего приложения в Chrome.

Я проверил его, и кажется, что ngClass постоянно обновляет класс с момента запуска приложения, даже если никаких изменений в компонент не внесено. Я хочу изменить класс только при щелчке элемента вставки.

Это нормальное поведение? Есть ли что-нибудь, что я могу сделать, чтобы остановить его?

Вот мой HTML:

<map class="map" (click)="switchInset('map')" [ngClass]="setClass('map')"></map> 
<app-video class="video" (click)="switchInset('video')" [ngClass]="setClass('video')"></app-video> 

И мой код TS:

mapFullscreen: boolean = true; 

switchInset(target: string) { 
    switch (target) { 
     case 'map': 
      if (!this.mapFullscreen) { 
       this.mapFullscreen = this.mapFullscreen ? false : true; 
      } 
      break; 

     case 'video': 
      if (this.mapFullscreen) { 
       this.mapFullscreen = this.mapFullscreen ? false : true; 
      } 
      break; 

     default: 
      break; 
    } 
} 

setClass(target: string) { 
    let classes = {}; 
    switch (target) { 

     case 'map': 
      classes = { 
       inset: !this.mapFullscreen, 
       fullscreen: this.mapFullscreen 
      } 
      break; 

     case 'video': 
      classes = { 
       inset: this.mapFullscreen, 
       fullscreen: !this.mapFullscreen 
      } 
      break; 

     default: 
      break; 
    } 

    return classes; 
} 

Answer 1

Ровно. Если у вас есть метод (функция) в вашей привязке, эта функция будет вызываться при каждом запуске обнаружения изменений, и это может быть довольно часто, как ваш опыт.

По этой причине привязка к методам обескуражена.

Вместо этого назначьте результат вызова метода для свойства и привяжите его к этому свойству.

[ngClass]="mapClass" 

ngOnChanges() { // just an example to use `ngOnChanges` 
    this.mapClass = setClass('map'); 
}