不同的服务注入到同一屏幕上

Question

我有两个屏幕：

1. Screen1（Empleado-empleado-form.js，empleado-form.js从empleado.js调用），其中注入了Service1。
2. 屏幕2（Departamento-departamento.js）注入服务2

这是我的错误的重演：

1. 导航到Screen1时，会注入Service1。
2. 注入导航到Screen2 Service2时。
3. 导航回Screen1时，会注入Service2。

我认为有意的行为是每个服务都注入到屏幕中，注入时不会随机注入下一个屏幕。

这是github的项目：https://github.com/DiegoGallegos4/aurelia-test;

• 屏幕1位于：src / departamento（服务在里面）
• 屏幕2位于：src / empleado（服务在里面，empleado-form.js是注入empleado-service.js的地方。）

我使用以下模式：

@inject(Screen1Service)
export class Screen1{
    constructor(service){
        this.service = service
    }

    ...service use to fetch/post data
}

如果需要复制品，请告诉我，我可以使用承诺制作一个要点。但是，我不知道导航是否可用于gist。

Answer 1

服务注入确实是正确的。问题在于这些服务使用HttpClient的方式。

每个服务类在其构造函数中配置HttpClient。由于单个HttpClient注入所有服务，后者创建服务覆盖以前的配置。而且，每个服务本身都是单例，因此它的构造函数和HttpClient配置只运行一次。

因此，导航顺序很重要。从Screen1导航时 - ＆gt;屏幕2 - ＆gt;回到Screen1，Service2中的最后一个配置有效。如果您将序列更改为Screen2 - ＆gt;屏幕1 - ＆gt;屏幕2，您将观察到相反的情况。

要解决此问题，您应该只在一个地方配置HttpClient，例如main或app。见discussion