@ 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 Responsive

Answer 2

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

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