BreakpointObserver не запускается - PullRequest
Новая
       18

BreakpointObserver не запускается

0 голосов
/ 13 октября 2018

Я настроил 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>

1 Ответ

0 голосов
/ 13 октября 2018

Так как isMobile - это Observable, которое развернется в значение, подобное этому: 

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

Поместите ! до того, как оно всегда станет ложным для *ngIf

Однако развернутый объект будет иметь свойство matches, равное boolean.Таким образом, вы можете использовать это.

Попробуйте вместо этого: 

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

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

Кроме того, измените реализацию HomeComponent, чтобы инициализировать isMobile в ngOnInit, поскольку это то, что следует за общимпрактика: 

export class HomeComponent {
  isMobile: Observable<BreakpointState>;

  constructor(private breakpointObserver: BreakpointObserver) { }

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

}

Вот Образец StackBlitz для вашей ссылки.

...