typescript - Angular 2 - Detener la actualización constante de NgClass

Tengo un componente de mapa que tiene un componente de video incrustado en él. El componente de mapa y el de video cambian de clase cuando se hace clic en el video, por lo que el video se vuelve de pantalla completa con el mapa incrustado en él.

Estoy actualizando la clase de ambos componentes usando NgClass, pero noté que la sección de clase del elemento del mapa parpadea en el inspector mientras ejecuto mi aplicación en Chrome.

Lo revisé, y parece que ngClass está actualizando constantemente la clase desde el momento en que la aplicación comienza, aunque no se hagan cambios en el componente. Solo quiero cambiar la clase cuando se haga clic en el elemento insertado.

¿Es este un comportamiento normal? ¿Hay algo que pueda hacer para detenerlo?

Aquí está mi HTML:

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

Y mi código 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;
}

Respuesta #1

Exactamente. Si tienes un método (función) en tu vinculación, esta función se llamará cada vez que se ejecute la detección de cambios, y eso puede ser bastante frecuente, como has experimentado.

Esta es la razón por la que se desaconseja enlazar a métodos.

En su lugar, asigne el resultado de la llamada al método a una propiedad y vincúlelo a esa propiedad.

[ngClass]="mapClass"

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