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');
}

Angular 2 - 不断更新NgClass

1 个答案: