Question

正常角度。我这样做。

export class BasicLayoutComponent implements OnInit {
  private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  @ViewChild(MatSidenav) sidenav: MatSidenav;
  @ViewChildren('sidenav') sidenavs: QueryList<MatSidenav>;

  constructor(private _route: ActivatedRoute,
              private _router: Router,
              zone: NgZone) {
    this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));

  }
  ngOnInit() {
    this._router.events.subscribe(() => {
      if (this.isScreenSmall()) {
        if (this.sidenavs.first) {
        this.sidenavs.first.close();
        } 
      }
    });
  }

  isScreenSmall(): boolean {
    return this.mediaMatcher.matches;
  }
}

但是，当我使用角度通用进行服务器端渲染时，它不起作用。我收到了错误错误{错误：未捕获（承诺）：ReferenceError：未定义matchMedia

我该如何解决这个问题？

Answer 1

某些变量和函数仅在客户端可用，而不是服务器端，例如document，window，因为它们是由浏览器定义的。 matchMedia可能属于此列表

如果您是客户端，则应修改代码以使用这些变量/函数，使用platformId标记来识别正在执行的代码是客户端还是服务器端

https://github.com/angular/universal/blob/master/README.md#universal-gotchas

matchMedia在使用角度通用进行服务器端渲染时不起作用

1 个答案: