角度2 - 停止NgClass常に更新

Question

私はそれにビデオコンポーネントが挿入されているマップコンポーネントを持っています。地図とビデオコンポーネントは、ビデオがクリックされるとクラスを切り替えるので、ビデオは地図がインセットされたフルスクリーンになります。

NgClassを使用して両方のコンポーネントのクラスを更新していますが、Chromeでアプリを実行しているときにインスペクタで地図要素のクラスセクションが点滅していました。

私はそれを調べました。コンポーネントが変更されていなくても、ngClassはアプリが起動した瞬間から常にクラスを更新しているようです。私は、インセット要素がクリックされたときにクラスを変更したいだけです。

これは正常な動作ですか？それをやめるために何かできることはありますか？

<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

は、ここに私のHTMLです。バインディングにメソッド（関数）がある場合、この関数は変更検出が実行されるたびに呼び出されます。

これは、メソッドへのバインドが推奨されない理由です。

代わりに、メソッド呼び出しの結果をプロパティに割り当て、代わりにそのプロパティにバインドします。

完璧に動作

[ngClass]="mapClass" 

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