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