打开的垫子抽屉不会随着MediaObserver更新

Question

在打开问题之前，我想知道是否有问题 用此代码。

问题是使用chrome中的切换设备工具栏（从lg到xs），垫子抽屉仍处于打开状态。如果我刷新了，效果很好。

视图

<mat-drawer-container>
  <mat-drawer
    #drawer
    class="sidenav mat-elevation-z1"
    mode="side"
    [opened]="opened"
  >
    <admin-layout-nav></admin-layout-nav>
  </mat-drawer>
  <main><router-outlet></router-outlet></main>
</mat-drawer-container>

ts

opened = true;
constructor(private media: MediaObserver) {
  let watcher = media.media$.subscribe((change: MediaChange) => {
    let activeMediaQuery = change
          ? `'${change.mqAlias}' = (${change.mediaQuery})`
          : '';
    if (change.mqAlias == 'xs') {
      this.opened = false;
    }
  });
}

已解决

[opened]="opened$ | async"

this.opened$ = media.media$.pipe(
      map((change: MediaChange) => {
        if (change.mqAlias == 'xs') {
          return false;
        }
        return true;
      })
    );