使用媒体查询更改元素的类，角度为4

Question

想要在浏览器宽度发生变化时更改元素的类 在我的.ts中有这个。

 matchMedia('(max-width: 400px)').addListener((mql => {
  if (mql.matches) {
    this.myclass = 'toggled';
}
}));

和html这样的东西：

<app-side-bar [ngClass]="myclass"></app-side-bar>

'myclass'的值已更改，但HTML元素（app-side-bar）未更新 - 我在这里缺少什么？

Answer 1

因为Angular会跟踪浏览器大小更改时发生的事件，所以它不会检测到更改。你必须自己触发它：

您可以通过扭曲NgZone：

中的代码来执行此操作

import { NgZone } from '@angular/core';

// Inject NgZone in your constructor:    
constructor(private zone: NgZone) {

}

// Run the code that changes state inside the zone
matchMedia('(max-width: 400px)').addListener((mql => {
    if (mql.matches) {
        this.zone.run(() => {
            this.myclass = 'toggled';
        });
    }
}));