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, …}

关于最新进展的任何想法都将不胜感激！

我使用的是Angular 5

Answer 1

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

无法通过HttpInterceptor

1 个答案: