Angular 抽象单例服务

Question

出于测试目的，我创建了抽象服务以轻松切换 production/mockup 服务。但是我发现 providedIn: 'root' 没有按预期工作（创建了许多服务实例）。这里是摘要class

@Injectable({providedIn: 'root',})
export abstract class AbstractAuthService {
  abstract loadUserProfile(): Observable<UserProfile>;
  ...
}

这是它的实现

@Injectable({ providedIn: 'root' })
export class AuthService implements AbstractAuthService {
  time = 0;

  constructor(private http: HttpClient) {
    // code for detect how many instances are created
    this.time = +new Date();
    console.log('CONSTURCTOR', this.time);
  }
  
  loadUserProfile() { console.log('load profile', this.time); ... }

  ...
}

并在 app.module.ts

@NgModule({
  ...
  providers: [
    { provide: AbstractAuthService, useClass: AuthService }
    ...
  ],
  ...

对于此代码，当我在浏览器中运行时（并在少数地方调用方法 loadUserProfile），我看到

> CONSTURCTOR 1623167229573
> ...
> CONSTURCTOR 1623167229612
> ...
> load profile 1623167229573
> load profile 1623167229612
> load profile 1623167229573
> load profile 1623167229612
> ...

这意味着 angular 至少创建此服务的两个实例，并运行为每个 loadUserProfile 调用交替创建它们。我只想创建一个 - 单例 - 因为我在该服务上保存了 csrfToken 和其他身份验证数据。

怎么做？

Answer 1

我发现以下解决方案很简单，但是 'low readable' - 在 app.module.ts 中使用 useExisting 而不是 useClass

{ provide: AbstractAuthService, useExisting: AuthService }

Angular 抽象单例服务

Angular abstract singleton service

singleton

angular