Angular 2 - Stop NgClass wird ständig aktualisiert

Question

Ich habe eine Map-Komponente, auf der eine Videokomponente eingeblendet ist. Die Karte und die Videokomponente wechseln die Klassen, wenn auf das Video geklickt wird, sodass das Video mit dem Karteninset auf dem Bildschirm angezeigt wird.

Mir Aktualisierung die Klasse beiden Komponenten NgClass, aber ich bemerkte die Klasse Abschnitt des Kartenelementes im Inspektoren Flimmern während meiner App in Chrome läuft.

Ich habe es überprüft, und es scheint, dass ngClass die Klasse von dem Moment an aktualisiert, in dem die App startet, obwohl keine Änderungen an der Komponente vorgenommen wurden. Ich möchte nur die Klasse ändern, wenn das Inset-Element angeklickt wird.

Ist das normales Verhalten? Kann ich etwas dagegen tun?

Hier ist mein HTML:

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

Und mein TS Code:

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

Genau. Wenn Sie eine Methode (Funktion) in Ihrer Bindung haben, wird diese Funktion jedes Mal aufgerufen, wenn die Änderungserkennung ausgeführt wird, und das kann ziemlich oft so sein, wie Sie es erlebt haben.

Aus diesem Grund wird von einer Bindung an Methoden abgeraten.

Weisen Sie stattdessen das Ergebnis des Methodenaufrufs einer Eigenschaft zu und binden Sie stattdessen an diese Eigenschaft.

[ngClass]="mapClass" 

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