2

我正在使用，@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);
  }

}
4

2 回答 2

1

我最终得到：

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

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

于 2016-02-21T03:26:42.280 回答
0

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

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

于 2016-02-15T16:51:17.647 回答