@angular/flex-layout 如何：基于屏幕大小的不同类？答案

【问题标题】：@angular/flex-layout How To: different class based on screensize?@angular/flex-layout 如何：基于屏幕大小的不同类？
【发布时间】：2018-05-02 23:35:52
【问题描述】：

有没有办法让@angular/flex-layout 根据屏幕大小更改类？

我知道我可以做到：

<div fxFlex="grow" fxLayout="row" fxLayout.xs="column">

还有这个：

<div fxFlex="22"    fxFlex.md="10px" fxHide.lg>

等等

我希望能够做这样的事情：

<div class="myWideClass" class.xs="myNarrowClass">

有没有办法做这种事情 - 根据屏幕宽度更改类？

谢谢！

【问题讨论】：

是的，阅读这个stackoverflow.com/questions/6850164/…
这篇文章与 angular 和 angular/flex-layout 无关
是的。我的示例中有 fxFlex.md 和 fxHide。那是 angular/flex-layout 不是吗？至少我认为是.. 我没有在 angular/flex-layout 之外使用过 flex box，所以也许我错了？
对不起，我指的是第一条评论；）请查看我的答案，这应该可以解决您的问题，并且是有角度的方法

标签： angular angular-flex-layout

【解决方案1】：

是的，有办法！

试试这个：

<div [ngClass.xs]="'myNarrowClass'"
     [ngClass.md]="{'myWideClass': true}"></div>

这里是文档

ngClass API Responsive

【讨论】：

完美！正是我想要的！谢谢！

【解决方案2】：

如果有人正在寻找一种方法来添加大于 xs 的类，例如，您可以这样做：

<div [ngClass.gt-xs]="'myNarrowClass'"></div>

【讨论】：