Angular 5：使用 ngClass 切换移动和桌面视图的类

Question

我的应用程序使用这些类：“large-screen”用于桌面视图，“small-screen”用于移动视图。我正在尝试使用 ngClass，以便可以在容器或包装器 div 中为各种组件在这些类之间切换，但我的所有实现似乎都不起作用。 p>

要求是桌面视图切换到“大屏幕”，移动视图切换到“小屏幕”。 以下是已经存在的媒体查询。

@media only screen and (max-width: 415px) {
  .large-screen {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
}

如果有人能提出不同的建议，将不胜感激。

Answer 1

在 app.ts 中

  addclass:any
  ngOnInit(){
    if (window.innerWidth < 658) {
    this.addclass =true
    alert("hgjk")
    } else {
     this.addclass=false
    } 
  }

在 html 中使用 ngClass

<div [ngClass]="{'table-striped':addclass}">
</div>

Answer 2

您可以通过简单的媒体查询和 HTML 的类属性来实现。不需要去 ngClass。

CSS

@media only screen and (max-width: 415px) {
  .small-screen {
    display: block;
  }
  .large-screen {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
  .large-screen {
    display: block;
  }
}

HTML

<div class="small-screen large-screen"></div>

Answer 3

您只能创建 1 个类并根据媒体查询更改其属性，如下所示：

@media only screen and (max-width: 415px) {
  .class-name {
    background-color: blue;
  }    
}
@media only screen and (min-width: 415px) {
  .class-name {
    background-color: red;
  }
}

否则，您将不得不 display:none 媒体查询中的类，您不希望它们出现，如下所示：

@media only screen and (max-width: 415px) {
  .small-screen {
    display: block;
  }
  .large-screen {
    display: none;
  }    
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
  .large-screen {
    display: block;
  }
}

这样你就必须在你想要在两个设备上工作的所有 div 中都使用它们：

<div class="small-screen large-screen"></div>

如果你想根据变量值使用，那么 ngClass 是有意义的，你可以这样使用：

<div [ngClass]="{'small-screen': isMobile, 'large-screen': !isMobile}></div>