angular - BreakpointObserver 未触发

Question

我已经按如下方式设置了 BreakpointObserver，但是当我的页面加载时它似乎没有触发。我的页面始终处于移动方向。我该如何修复它？

home.component.ts

import { Component, OnInit } from '@angular/core';
import { Breakpoints, BreakpointState, BreakpointObserver } from '@angular/cdk/layout';
import { Observable } from 'rxjs';

@Component({
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  isMobile: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);

  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit() {
  }
}

home.component.html

<div *ngIf="!isMobile | async">is not mobile</div>

<div *ngIf="isMobile | async">is mobile</div>

Answer 1

由于 isMobile 是一个 Observable ，它将解包成如下所示的值:

{
  "matches": true,
  "breakpoints": {
    "(max-width: 599px) and (orientation: portrait)": true,
    "(max-width: 959px) and (orientation: landscape)": false
  }
}

在它之前放置一个 ! 始终会使 *ngIf 为 false

但是，解包的对象将具有 matches 属性，该属性是一个 boolean。所以你可以使用它。

试试这个:

<div *ngIf="!(isMobile | async)?.matches">is not mobile</div>

<div *ngIf="(isMobile | async)?.matches">is mobile</div>

此外，更改您的 HomeComponent 实现以在 ngOnInit 中初始化 isMobile，因为这是常见的做法:

export class HomeComponent {
  isMobile: Observable<BreakpointState>;

  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit() {
    this.isMobile = this.breakpointObserver.observe(Breakpoints.Handset);
  }

}

这是一个Sample StackBlitz供您引用。