在另一个单例服务中创建 Angular 单例服务的新实例答案

【问题标题】：New instance of Angular singleton service being created in another singleton service在另一个单例服务中创建 Angular 单例服务的新实例
【发布时间】：2019-06-21 23:36:21
【问题描述】：

我是 Angular 的新手，我正在尝试弄清楚如何将我的 Angular 服务（游戏服务）注入到另一个将成为 Resolver（游戏解析器）的 Angular 服务中。我的应用程序中通常只创建一个游戏服务实例，并且我成功地将它注入到我的每个组件中，但是当需要我的游戏解析器服务时，它会创建一个新的游戏服务实例，即使游戏服务是应该是单身人士。

我尝试在我的 NgModule 的 'providers' 数组中声明这两个服务，以尝试使它们成为单例服务，并且我还尝试了在 @Injectable 装饰器中声明 'providedIn:'root' 的方法，但是在调用游戏解析器服务构造函数时会创建一个新的游戏服务实例。

//GameResolver.service.ts

    @Injectable({
      providedIn: 'root'
    })
    export class GameResolverService implements Resolve<Game> {
      constructor(private gameService: GameService) {

      }


      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Game> {

          return this.gameService.getGameById(gameId)

      }
    }

//game-resolver.service.spec.ts    

import { TestBed, inject } from '@angular/core/testing';

import { GameResolverService } from './game-resolver.service';

describe('GameResolverService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [GameResolverService]
    });
  });

  it('should be created', inject([GameResolverService], (service: GameResolverService) => {
    expect(service).toBeTruthy();
  }));
});



//Game.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Game } from './game';
import { map } from "rxjs/operators";
import { User } from './user';


@Injectable({
  providedIn: 'root'
})
export class GameService {

  constructor(private http: Http) {
    console.log('new instance of GameService created');
  }



//app.module.ts

const appRoutes: Routes = [
  ...
  {path:'game', component: GameComponent, data:{depth:3}, resolve: { game: GameResolverService}},
  {path:'endGame', component: EndGameComponent, data:{depth:4}},
  {path:'nextRound', component: NextRoundComponent, data:{depth:5}}
]

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [AppComponent],
  providers: [GameService, GameResolverService]
})


//create-game.component.ts
...
import {GameService} from '../game.service';




@Component({
  selector: 'app-create-game',
  templateUrl: './create-game.component.html',
  styleUrls: ['./create-game.component.css'],

})
export class CreateGameComponent implements OnInit {
  // @HostListener('window:popstate', ['$event'])




  constructor(private gameService: GameService, private router: Router) {
   }


//game.component.ts

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.css']
})
export class GameComponent implements OnInit {

  game:Game;

  constructor(private gameService: GameService, private router: Router, private socketService: SocketService, private route: ActivatedRoute ) {
    this.game = this.route.snapshot.data['game']
  }
}

关于角度依赖注入的层次结构，我有什么不明白的地方吗？我需要 GameService 成为应用程序所有部分的单例服务，因此我需要将单例实例注入 Game Resolver Service 而不创建新实例。

【问题讨论】：

How do I create a singleton service in Angular 2?的可能重复
您应该在服务本身中包含providedIn: 'root'，或者将它们添加为模块中providers 数组的一部分，而不是两者兼而有之。
@DzhavatUshev 感谢您向我指出这一点。但是，在实现任一选择时，我仍然会获得多个 GameService 实例。
多实例是什么意思？尝试将GameService 注入另一个服务和/或组件，看看constructor 是否运行？
我的意思是当 GameService 被注入到一个组件中时，GameService 构造函数不会被调用。但是当它被注入到GameResolverService中时，会调用GameService的构造函数。

标签： angular dependency-injection angular-dependency-injection

【解决方案1】：

经过大量搜索，我终于意识到，在我的 app.component.ts 文件中，我仍然在 @Component 装饰器中定义了 providers 数组，而我正在使用 providedIn: 'root' 方法。 Dzhavat Ushev 是对的，您不能同时使用这两种方法。我以为我已经摆脱了我所有的providers 声明，但我不知道那里有一个。它现在完美运行。谢谢你们的帮助。

【讨论】：