Question

完整StackBlitz示例：https://stackblitz.com/edit/angular8-async-pipe

应用程序组件模板中包含三个相同的组件：

<app-loader></app-loader>
<app-progress></app-progress>
<app-spinner></app-spinner>

每个组件都调度自己的NgRx动作，该动作使用NgRx效果触发Http请求并等待其完成：

import { Component, OnInit } from '@angular/core';

import { Store } from '@ngrx/store';

import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

import { ActionsService } from '../../../services/actions.service';

import * as MockyActions from '../../actions/mocky.actions';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html'
})
export class SpinnerComponent implements OnInit {
  progress$: Observable<boolean>;

  constructor (
    private store: Store<any>,
    private actionsService: ActionsService) {}

  ngOnInit() {
    this.progress$ = this.actionsService
      .isInProgress(MockyActions.GetMockySpinner)
      .pipe(
        map(({status}) => status),
        tap((status) => console.log('GetMockySpinner: ', status))
      );

    this.store.dispatch(MockyActions.GetMockySpinner());
  }
}

在每个使用异步管道的组件中，我想在Http请求进行时显示微调器：

<div class="text-center" *ngIf="!(progress$ | async); else progress">
  Spinner
</div>

<ng-template #progress>
  <div class="text-center">
    <span class="spinner spinner-sm"></span>
  </div>
</ng-template>

在这种情况下，在Http请求进行过程中，仅显示<app-spinner></app-spinner>组件中的微调框。并且如果应用程序组件模板中的组件顺序发生了更改：

<app-loader></app-loader>
<app-progress></app-progress>
<app-spinner></app-spinner>
<app-loader></app-loader>

在这种情况下，在HTTP请求过程中，{p> 1中的

Spinner正在显示。因此，只有模板中的最后一个组件可以按预期工作。

那么Angular 8中的异步管道有什么变化或我做错了什么？

完整StackBlitz示例：https://stackblitz.com/edit/angular8-async-pipe

Answer 1

您没有为应用程序使用实际状态和化简。 NgRX要求您同时使用动作和减速器。您遇到的问题是，当前两个组件订阅动作主题时，这是第三个动作。您不会监听NgRX中发生的动作。相反，您要做的是监视操作将更改您的状态。

这是一个可以解决您问题的有效堆栈炸弹。

https://stackblitz.com/edit/angular8-async-pipe-xexehj?file=src%2Fapp%2Fapp.module.ts

下面是一些有用的文档。 https://ngrx.io/guide/store/reducers https://ngrx.io/guide/store

Answer 2

您的MockyActions出了些问题。

更改

this.progress$ = this.actionsService.isInProgress(MockyActions.GetMockyProgress)
...

和

this.progress$ = this.actionsService.isInProgress(MockyActions.GetMockyLoader)
...

收件人

this.progress$ = this.actionsService.isInProgress(MockyActions.GetMockySpinner)

您的示例效果很好。

Angular 8异步管道订阅问题

2 个答案: