有条件使用角度弯曲布局吗？

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>