Observable/Subject delay/throttle 问题（ngIf 和异步）

Question

我正在使用 @ngrx/store 并且在请求开始时显示通知或 returns 错误并在请求成功时隐藏它。它按预期工作，我想延迟初始通知，以便在请求快速结束时不显示。我已经尝试了几个与时间一起工作的 Observable/Subject 运算符：

With delay and bufferTime message 是 null 这会导致 <notification>
使用 debounceTime 不显示初始消息，但响应缓慢且错误消息仍然是 null
throttleTime 仅显示初始通知并在响应较慢时将其隐藏

如果没有这些 *ngIf="(notification |async)" 中的任何一个，它就可以完成工作，并且仅当通知不是 null.

时才会设置 message

我想我可以用 CSS 转换延迟来隐藏 <notification>，但我想知道是否有人知道解决这个问题的其他方法...

@Component({
  template: `<notification [message]="notification |async" *ngIf="(notification |async)"></notification>`
})
export class RootRoute {
  constructor(...) {
    this.notification = this.store.select('notification')
      // None of these solve my issue:
      // .delay(250)
      // .throttleTime(250)
      // .debounceTime(250)
      // .bufferTime(250)
  }
}

export class Service {

  private request(method: any, values: any, endpointsUrl: string, actionType: string, storeSelector?) {
    this.store.dispatch({ type: "SHOW_NOTIFICATION", payload: {code: 200, message: "Getting data from server..."} });

    this._http.request(BASE_URL + endpointsUrl, { body: JSON.stringify(values), method: method })
      .map(response => response.json())
      .map(payload => ({ type: actionType, payload }))
      .subscribe({
        next: action => this.store.dispatch(action),
        error: payload => this.store.dispatch({ type: 'API_ERROR', payload }),
        complete: () => this.store.dispatch({ type: "HIDE_NOTIFICATION" })
      });

    if (storeSelector)
      return this.store.select(storeSelector);
  }

}

Answer 1

你的问题让我想到另一个问题：

我没有测试，但混合使用 flatMap、delay 和 takeUntil 运算符可以满足您的需求。

Answer 2

我最终得到：

this.store.select('notification')
  .debounceTime(250)
  .subscribe((message: INotification) => this.notification = message);

并恢复到此组件的 ChangeDetectionStrategy.Default。我想这是 async 管道的问题之一...

Observable/Subject delay/throttle 问题（ngIf 和异步）

Issue with Observable/Subject delay/throttle (ngIf & async)

rxjs5

ngrx

angular