自定义断点不在flexlayout中工作

Question

我正在尝试使用flexlayout为不同的分辨率模式设置不同的背景颜色。

它不起作用，下面是我的代码

app.component.html

<div class="content" fxLayout="row" fxLayout.xs="column" fxFlexFill >
          <div fxFlex="50" [fxFlex.xs]="xsBGColor" [fxFlex.md]="mdBGColor">
              first-section
          </div>
          <div fxFlex="50" [fxFlex.xs]="xsBGColor"  [fxFlex.md]="mdBGColor">
              second-section
          </div>
</div>

app.component.css

.xsBGColor{
background-color:red;
}
.mdBGColor{
background-color:blue;
}

我错过了一些但我无法找到的东西，请在我的代码中提出我错过的内容。

Answer 1

您应该使用ngClass而不是fxFlex

ngClass.xs="xsBGColor"

参考：https://github.com/angular/flex-layout/wiki/ngClass-API