@angular/flex-layout 如何：根据屏幕大小不同 class？

Question

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

我知道我能做到：

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

还有这个：

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

等等

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

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

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

谢谢！

Answer 1

是的，有办法！

试试这个：

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

这是文档

Answer 2

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

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

@angular/flex-layout How To: different class based on screensize?