Angular 2 - 停止 NgClass 不断更新

Question

我有一个地图组件，上面嵌入了视频组件。单击视频时，地图和视频组件会切换 class，因此视频会变成全屏并在其上插入地图。

我正在使用 NgClass 更新两个组件的 class，但我注意到地图元素的 class 部分在检查器中闪烁，而运行我的应用程序在 Chrome.

我检查了一下，似乎 ngClass 从应用程序启动的那一刻起就在不断更新 class，即使没有对组件进行任何更改。我只想在单击插入元素时更改 class。

这是正常行为吗？我能做些什么来阻止它吗？

这是我的 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');
}

Angular 2 - 停止 NgClass 不断更新

Angular 2 - Stop NgClass updating constantly

angular

typescript

ng-class