Angular 8：单例服务在每次需要新文件时创建新实例

Question

我有一个完整的工作平台，它在服务中使用 Rxjs 行为主体（Observables）来保持整个应用程序的状态。它工作得很好，直到我需要包含 WebSockets 来更新同一帐户中许多用户的信息。 当更新的信息到达用户时，我调用行为主题来检查是否应该更新活动的供应商（用户当前看到的供应商），但是 Observable 总是返回“null”，因为它是一个新的实例可观察的（与用户屏幕上显示的不同）。

为了测试它，我在两个不同的文件中记录了相同的 observable：

//Supplier.service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject } from 'rxjs';
import { Supplier } from '../../models/supplier.model';
import { UserService } from './User.service';

@Injectable({providedIn: 'root'})
export class SupplierService {
  activeSupplier = new BehaviorSubject<Supplier>(null);

  constructor (
    private http: HttpClient,
    private userService: UserService,
  ) {}

{...}

getOneSupplier(supplierId: string) {
  this.http.get<Supplier>(`${BASEURL}supplier/${supplierId}`)
    .subscribe(supplier => {
        this.activeSupplier.next(supplier);
        this.activeSupplier.pipe(take(1)).subscribe(activeSupplier => {
        console.log('updater:', activeSupplier); // <----------------- here
    });
  });
}

updateSupplierList(changedSupplier) {
    this.activeSupplier.pipe(take(1)).subscribe(activeSupplier => {
      console.log('Socket changing active supplier:', activeSupplier);
        if (activeSupplier._id === changedSupplier._id) {
          this.getOneSupplier(activeSupplier._id);
      }
    });
  }

{...}

}

//Socket.service.js

import { Injectable } from '@angular/core';
import io from './SocketCopier.js';
import { UserService } from './User.service.js';
import { SupplierService } from './Supplier.service.js';

@Injectable({
providedIn: 'root',
})
export class SocketService {
socket;
subs = {};

constructor(
private userService: UserService,
private supplierService: SupplierService
) {
this.supplierService.activeSupplier.subscribe(activeSupplier => {
  console.log('socket:', activeSupplier); // <----------------- and here
});
}

loadSocket(user) {
io.then((result) => {
  if (this.socket) {
    this.socket.close();
  }

  this.socket = result('http://localhost:3000');
  this.socket.on('connect', () => {
    this.socket.emit('login', { account: user.account._id })
  });

  this.socket.on('logged', (msg) => {
    console.log(msg.text);
  });

  this.socket.on('supplierChange', (msg) => {
    this.supplierService.updateSupplierList(msg.data);
  });
});
}

}

//supplier-info.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SupplierService } from 'src/app/shared/services/Supplier.service';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { Supplier } from 'src/app/models/supplier.model';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-supplier-info',
  templateUrl: './supplier-info.component.html',
  styleUrls: ['./supplier-info.component.css'],
})
export class SupplierInfoComponent implements OnInit, OnDestroy {
  supplier: Supplier;
  subs = {};
  activeRoute: string = 'projetos';

  constructor(
    private supplierService: SupplierService, 
    private route: ActivatedRoute,
    private router: Router,
    ) { }

  ngOnInit() {
      this.supplierService.getOneSupplier(this.route.snapshot.params.supplierId);
  }

  {...}

}

代码首先调用Socket.service.ts，后者调用Supplier.service.ts，创建行为主体“activeSupplier”，初始值为“null”。

然后 Socket.service.ts 在其构造函数中订阅“activeSupplier” observable 并按预期返回“null”。

然后生成supplier-info.component.ts，在ngOnInit中它需要供应商信息，调用“this.supplierService.getOneSupplier()”。这会更新记录供应商的“activeSupplier”BehaviorSubject。

这是我从这些日志中得到的结果：

socket: null
updater: {socialMediaUrls: {…}, photoUrl: "", emails: Array(0), skills: Array(0), tags: Array(4), …}

Socket 的 observable 永远不会再次更新，因为它是“supplierService”的一个新实例，并且它不与supplier-info.component.ts 共享同一个“activeSupplier”。应该更新了吧？因为它订阅了同一个 Observable（至少理论上如此）。

我在这里没有看到什么？ 提前感谢您的所有帮助！

编辑： 值得一提的是，任何对“activeSupplier” Observable 订阅的新订阅都会返回“null”，因为它是第一个值（即使在第二个带有供应商的 console.log 之后）。

Answer 1

我找到了！ 在许多（许多）调试日志之后，我发现我真的在创建另一个服务实例。为了找出这一点，我记录了 Supplier.service.ts 构造函数。然后我看到两个日志都发生在不同的行中。打开这些文件（chrome inspect > source）我发现它们是不同的（？），所以我尝试在 Sockets.service.ts 中“重写”导入，它成功了！

那是因为我错误地导入了它（末尾带有“.js”）。

从这里：

import { UserService } from './User.service.js';
import { SupplierService } from './Supplier.service.js';

到这里：

import { UserService } from './User.service';
import { SupplierService } from './Supplier.service';

现在一切正常！

Answer 2

阅读您的评论和其中的代码，我认为您可以尝试这样的事情。

首先，您将从 http 服务收到的 活跃供应商 的值保存在某处，可能在开始时。像这样的

export class SupplierService {
  activeSupplier = new BehaviorSubject<Supplier>(null);
  activeSupplierValue: Supplier;

  constructor (
    private http: HttpClient,
    private userService: UserService,
  ) {}
...

getOneSupplier(supplierId: string) {
  this.http.get<Supplier>(`${BASEURL}supplier/${supplierId}`)
    .subscribe(supplier => {
        this.activeSupplierValue = supplier;  // save the data of the active supplier
        ......
    });
  });
}
...

}

然后，您将 活动供应商 与您从套接字收到的任何内容进行比较，如果匹配，您将再次触发 getOneSupplier。

updateSupplierList(changedSupplier) {
   if (activeSupplier._id === changedSupplier._id) {
      this.getOneSupplier(activeSupplier._id);
   }
}