Angular cdk 断点和普遍问题

Question

当渲染角度通用时，断点命中来得太晚了。 我正在使用 mat-sidenav，它希望根据断点将抽屉设置为打开或不打开。 渲染ssr的时候好像没有断点信息。

例如，这在构造函数中：

this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
        map(result => result.matches)
    );

在视图中：

<mat-sidenav-container class="sidenav-container" fullscreen>
<mat-sidenav class="sidenav" 
    [opened]="(isHandset$ | async) === false">  <!-- close if handset -->
... etc

在应用程序水合之后（在完整的角度项目加载之后）抽屉根据视口大小打开/关闭，但最初不是。

如何使断点也适用于通用？

我目前正在使用 angular 9 rc，但在 8 中存在同样的问题。

Answer 1

您可以使用startWith定义在任何断点之前首先发出的默认值。

this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
        map(result => result.matches),
        startWith(false)
    );