有条件地使用角度弹性布局？

【问题标题】：Use angular flexlayout conditionally?有条件地使用角度弹性布局？
【发布时间】：2019-06-03 13:46:25
【问题描述】：

在条件意义上。所以，如果屏幕是一定的尺寸，设置一个属性

伪代码：

<mat-sidenav class="sidenav" fixedInViewport="true"
    [opened]="! (fxLayout.xs | fxLayout.sm)">
</mat-sidenav>

所以，如果屏幕很小，那么sidenav应该默认不打开。

这可能吗？也许使用ngIf，但我想不出办法。

【问题讨论】：

【解决方案1】：

您可以通过使用MediaObserver::isActive() 来实现这种行为

首先，注入MediaObserver服务：

...
constructor(public mediaObserver: MediaObserver) {}
...

然后在您的模板中使用它，如下所示：

<mat-sidenav class="sidenav" fixedInViewport="true"
    [opened]="!(mediaObserver.isActive('xs') || mediaObserver.isActive('sm'))">
</mat-sidenav>

【讨论】：