Question

如果它是异步的，如何使用获取breakpointObserver的值基于设备方向返回true / false值？此刻，它总是结果为false，我无法映射正确的样式表。

以下代码：

查看

  <ng-container *ngFor="let feature of features">
    <div [ngClass]="setFeatureCardColumnWidth(isMobile)" aos-animate data-aos="fade-up">
      <app-home-feature-card title="{{ feature.title }}" description="{{ feature.description }}"
        image="{{ feature.image }}">
      </app-home-feature-card>
    </div>
  </ng-container>

控制器

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

  setFeatureCardColumnWidth(isMobile) {
    if (!isMobile) {
      return 'col-lg-4';
    } else {
      return 'col-md-12';
    }
  }

Answer 1

BreakpointObserver.observe返回一个已经观察到的许多回答者的Observable。但是您不需要手动订阅和取消订阅。利用异步管道，将流先映射到所需的值。

ngOnInit() {
  this.columnWidth$ = this.breakpointObserver.observe([Breakpoints.Handset]).pipe(
    map(isHandset => isHandset ? 'col-md-12' : 'col-lg-4')
  );
}

例如，您可以在模板中使用

<div [ngClass]="columnWidth$ | async"></div>

您也不需要isMobile属性，并在组件中进行检查。而是修改Observable流。

Answer 2

您需要使用AsyncPipe来在Angular模板中使用可观察对象。将isMobile更改为(isMobile | async)。

Answer 3

首先，您需要使用Breakpoints.HandsetPortrait而不是Breakpoints.Handset，因为最后一个观测到的是Portrait和Lancscape，因此它将始终匹配。

第二，您需要订阅可观察对象（这样您就可以知道方向何时发生变化），并检查结果是否匹配（这样您就可以知道新方向是否为纵向）：

this.breakpointObserver.observe([Breakpoints.HandsetPortrait]).subscribe(
  result => {
    this.isMobile = result.matches;
  }
);

您不需要将isMobile传递给函数，可以这样编写：

getFeatureCardColumnWidth() {
if (!this.isMobile) {
  return 'col-lg-4';
} else {
  return 'col-md-12';
}

此处的完整代码：https://stackblitz.com/edit/angular-5fxcok-observe-handset-portrait

更新

如果您希望对代码进行更少的更改：

将Breakpoints.Handset更改为Breakpoints.HandsetPortrait，如下所示：

this.isMobile = this.breakpointObserver.observe([Breakpoints.HandsetPortrait]);

在模板中使用AsyncPipe，并将matches属性传递给函数，如下所示：

setFeatureCardColumnWidth((isMobile | async)?.matches)

Answer 4

我相信您当前正在将返回的Observable从this.breakpointObserver.observe()分配给this.isMobile。您现在需要订阅该可观察对象。

ngOnInit() {
  this.isMobile$ = this.breakpointObserver.observe([Breakpoints.Handset])
    .subscribe(result => this.isMobile = result);
}

setFeatureCardColumnWidth(isMobile) {
  if (!isMobile) {
    return 'col-lg-4';
  } else {
    return 'col-md-12';
  }
}

您想引用this.isMobile$的原因是为了以后可以在ngOnDestory退订

ngOnDestroy() {
  if (this.isMobile$) this.isMobile$.unsubscribe();
}

根据异步对象设置类

4 个答案:

更新