Angular 可观察/受试者延迟/节流问题（ngIf和异步）

我使用的是

@ngrx/store

，当请求启动或返回错误时，我会显示通知，如果请求成功，我会隐藏它。它按预期工作，我想延迟初始通知，以便在请求快速结束时不会显示。我尝试了几个与时间相关的可观察/主题操作符：

• 带有

  延迟

  和

  缓冲时间

  的消息为

  空

  ，导致

• 使用

  debounceTime

  不会显示初始消息，但响应缓慢且出现错误消息仍然

  null

• throttleTime

  仅显示初始通知，并以缓慢响应将其隐藏

如果没有任何这些

*ngIf=“（notification | async）”

则执行其任务，并且只有在通知不为

null时才设置消息

我想我可以用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);
  }

}

@组件({
模板：``
})
导出类根路由{
构造函数（…）{
this.notification=this.store.select（'notification'））
//这些都不能解决我的问题：
//.延迟（250）
//.节流时间（250）
//.debounceTime（250）
//.缓冲时间（250）
}
}
出口类服务{
私有请求（方法：any、值：any、endpointsUrl:string、actionType:string、storeSelector？）{
dispatch（{type:“SHOW_NOTIFICATION”，有效负载：{code:200，message:“getingdatafromserver…”}）；
这个._http.request（BASE_URL+endpointsUrl，{body:JSON.stringify（values），method:method}）
.map（response=>response.json（））
.map（有效负载=>（{type:actionType，payload}））
.订阅({
下一步：action=>this.store.dispatch（action），
错误：payload=>this.store.dispatch（{type:'API_error'，payload}），
完成：（）=>this.store.dispatch（{type:“HIDE_NOTIFICATION”}）
});
如果（存储选择器）
返回this.store.select（storeSelector）；
}
}
你的问题让我想到了另一个问题：




我没有进行测试，但混合了flatMap、delay和takeUntil操作符，直到操作符能够满足您的需要。
我最终得到了：

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

并恢复为此组件的
ChangeDetectionStrategy.Default
。我想这是
async
pipe的问题之一…
你试过了吗？@Langley不确定在这种情况下我该如何使用它。另外，它不是
Subject
的有效运算符……您提到的
Observable
不是
Subject
，
Subject
包装了一个Observable，尽管它可能也有它或类似的东西。它有助于指定observable将调用其订阅者的时间，我想这就是您所说的“我想延迟初始通知，以便在请求快速结束时不会显示”的意思
@ngrx/store.select（）
返回主题，我将更新问题。。。