有条件地使用 angular flexlayout？

Question

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

伪代码：

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

因此，如果屏幕尺寸较小，则sidenav不应默认打开。

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

Answer 1

您可以使用 MediaObserver::isActive()

实现此类行为

首先，注入MediaObserver服务：

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

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

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