注入同一屏幕的不同服务

Question

我有两个屏幕：

1. Screen1(Empleado-empleado-form.js, empleado-form.js is called from empleado.js) 其中注入了 Service1。
2. Screen2(Departamento-departamento.js) 其中服务 2 被注入

这是我错误的重现：

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

我想预期的行为是每个服务都使用@injected 注入到屏幕中，而不是随机注入到下一个屏幕。

这是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
}

如果需要重现，请告诉我我可以使用 promises 制作要点。但是，我不知道要点上是否可以使用导航。

Answer 1

服务注入确实正确。问题在于这些服务使用 HttpClient.

的方式

每个服务 class 在其构造函数中配置 HttpClient。由于将单个 HttpClient 注入到所有服务中，后者创建的服务会覆盖先前的配置。此外，每个服务本身都是一个单例，因此它的构造函数和 HttpClient 配置仅 运行 一次。

因此，导航顺序很重要。从 Screen1 -> Screen2 -> 返回 Screen1 时，Service2 中的最后配置生效。如果将顺序更改为 Screen2 -> Screen1 -> Screen2，则会观察到相反的结果。

要解决此问题，您应该只在一处配置 HttpClient，例如 main 或 app。看到这个