Question

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

delay和bufferTime 消息为null，导致<notification>
使用debounceTime未显示初始消息，但响应缓慢且错误消息仍为null
throttleTime仅显示初始通知，并以慢响应隐藏

如果通知不是*ngIf="(notification |async)"，那么null中没有任何一项工作，消息就会设置。

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

@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

我最终得到了：

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

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

Answer 2

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

Angular 2 RxJS check if mouse event is still active after delay

我没有测试，但混合flatMap，延迟和takeUntil运算符可能符合您的需求。

Observable / Subject延迟/限制问题（ngIf＆amp; async）

2 个答案: