@ angular / flex-layout如何：基于屏幕尺寸的不同类？

Question

有没有办法让@ 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">

有什么方法可以做这种事情-根据屏幕宽度更改类吗？

谢谢！

Answer 1

是的，有办法！

尝试一下：

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

这是文档

ngClass API响应式

Answer 2

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

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