2

私は作業して@ngrx/storeおり、リクエストが開始されたとき、またはエラーが返されたときに通知を表示し、リクエストが成功した場合は非表示にしています。意図したとおりに機能し、リクエストがすぐに終了した場合に表示されないように、最初の通知を遅らせたかったのです。時間とともに機能するいくつかの Observable/Subject 演算子を試しました。

  • delaybufferTime メッセージnullエラーの原因 となります<notification>
  • を使用debounceTimeしても最初のメッセージは表示されませんが、応答が遅く、エラーメッセージが表示されますnull
  • throttleTime最初の通知のみを表示し、応答が遅いと非表示にします

これらのいずれもなしで*ngIf="(notification |async)"は、それは仕事であり、通知がそうでない場合にのみメッセージnullが設定されます。

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);
  }

}
4

2 に答える 2