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

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

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

我当前使用的是角度9 rc，但在8中存在相同的问题。

Answer 1

您可以定义一个default值，该值先使用startWith在任何断点之前发出。

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