无法通过 HttpInterceptor 通过服务推送数据

Question

我创建了一个 MessageService，我将数据推送到其中，然后由我的 app.main 读取以向用户显示这些消息。当我在组件中使用此服务时，它工作正常。我想要做的是将其提升到 HttpInterceptor 级别，它将监视所有 HttpResponse 服务器消息并将它们推送到服务中以供用户显示。

这是我的服务：

@Injectable()
export class MessageService {
  private successMessageList = new Subject<string>();
  successMessages$ = this.successMessageList.asObservable();

  constructor() { }

  addSuccessMsg(msg: string) {
    this.setMsgs(this.successMessageList, msg);
  }

  private setMsgs(privMsgArray: Subject<string>, newMsgs: any) {
    let messages = [];
    messages.push(newMsgs);

    messages.forEach(message => privMsgArray.next(message));
    console.log(this.successMessageList);
  }
}

这是我的 HttpInterceptor

@Injectable()
export class MyHttp implements HttpInterceptor {
  constructor(private messageService: MessageService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          if(event.body['successMsg']) {
             this.messageService.addSuccessMsg(event.body['successMsg']);
          }
        }
      })
  }
}

这是我的app.main读取数据

export class AppComponent implements OnInit {
  successMessages = [];

  constructor(private messageService: MessageService) { }

  ngOnInit(): void {
    this.messageService.successMessages$.subscribe(
      message => {
        console.log(message);
        setTimeout(() => {
          this.successMessages.push(message);
        });
      });
  }
}

通过一些控制台语句，我可以看到数据正确地进入了 messageService.setMsgs(...) 私有方法，但它永远不会像我通过组件发送消息时那样到达我的 app.main。没有错误消息或任何东西，它只是不起作用。

我注意到的一件事是 MessageService.setMsgs(..) 我为 successMessageList 放置了一个控制台语句。当我通过组件添加消息时，我得到的输出看起来像这样（注意 observers: Array(1) vs observers: Array(0) ）

Subject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}

但是当我通过 HttpInterceptor 添加消息时，我得到了这个

Subject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}

任何关于正在发生的事情的想法都将不胜感激！

我正在使用Angular5

Answer 1

此问题 100% 是用户错误。在我的 app.main 组件中，我将 messageService 声明为 @Component 中的 provider，因此该服务不像我期望的那样是共享单例。在我删除后一切都按预期工作。

无法通过 HttpInterceptor 通过服务推送数据

Cannot push data through a service via HttpInterceptor

angular

angular-http-interceptors

angular-httpclient