如何在加宽屏幕时删除 ngClass

Question

我正在添加一个 class 到 2 div 以使用 [ngClass] 切换侧边栏 header 如何在放大屏幕时删除那些 class。

问题是在加宽屏幕时它仍然存在只是因为 class 没有被删除。我如何删除 class?

添加 class [ngClass]="{'menu-push-onscreen': show}" 它会切换，当我加宽屏幕时它会自动出现，我该如何删除它？

show: boolean = false;

 onToggleHeader(){
   this.show=!this.show;

}

Answer 1

只需将 [ngClass] 绑定设置为 null。这是一个例子：

在你的component.html中：

<div [ngClass]="myClass"></div>

在你的组件中 class:

...
// Declare varibale
myClass:string;

// Set some variable to true if the screen widening
if(isScreenWidening){
    this.myClass = null;
}
...

Answer 2

@media screen and (max-width: 600px) { // this is for screen width less than equal to 600px

  .yourClass{
     // remove all the properties you might have set
  }
}

如果您需要根据屏幕尺寸添加更多媒体查询，请更改最大或最小宽度。

如何在加宽屏幕时删除 ngClass

How to remove ngClass while widening the screen

angular-ng-class

angular