正在另一个单例服务中创建Angular单例服务的新实例
我是Angular的新手,我正试图弄清楚如何将我的Angular服务(游戏服务)注入另一个Angular服务,它将是一个解析器(游戏解析器)。在我的应用程序中通常只创建一个游戏服务实例,并且我正在成功地将其注入到每个组件中,但是当需要我的游戏解析器服务时,它会创建一个新的游戏服务实例,即使游戏服务应该是单例的 我已经尝试在我的NgModule的“providers”数组中声明这两个服务,试图使它们都成为单例服务,并且我还尝试了在@Injectable decorator中声明“providedIn:”root”的方法,但是在调用游戏解析程序服务构造函数时会创建一个新的游戏服务实例正在另一个单例服务中创建Angular单例服务的新实例,angular,dependency-injection,angular-dependency-injection,Angular,Dependency Injection,Angular Dependency Injection,我是Angular的新手,我正试图弄清楚如何将我的Angular服务(游戏服务)注入另一个Angular服务,它将是一个解析器(游戏解析器)。在我的应用程序中通常只创建一个游戏服务实例,并且我正在成功地将其注入到每个组件中,但是当需要我的游戏解析器服务时,它会创建一个新的游戏服务实例,即使游戏服务应该是单例的 我已经尝试在我的NgModule的“providers”数组中声明这两个服务,试图使它们都成为单例服务,并且我还尝试了在@Injectable decorator中声明“providedI
//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']
}
}
//GameResolver.service.ts
@注射的({
providedIn:'根'
})
导出类GameSolverService实现解析{
构造函数(私有游戏服务:游戏服务){
}
解析(路由:ActivatedRouteSnapshot,状态:RouterStateSnashot):可观察{
返回此.gameService.getGameById(gameId)
}
}
//game-resolver.service.spec.ts
从'@angular/core/testing'导入{TestBed,inject};
从“./game resolver.service”导入{GameResolverService};
描述('GameSolverService',()=>{
在每个之前(()=>{
TestBed.configureTestingModule({
提供者:[游戏解决方案服务]
});
});
它('should be created',injection([GameResolverService],(service:GameResolverService)=>{
expect(service.toBeTruthy();
}));
});
//Game.service.ts
从“@angular/core”导入{Injectable};
从'@angular/Http'导入{Http,Headers};
从“./Game”导入{Game};
从“rxjs/operators”导入{map};
从“/User”导入{User};
@注射的({
providedIn:'根'
})
导出类游戏服务{
构造函数(专用http:http){
log(“创建了GameService的新实例”);
}
//app.module.ts
施工许可:路线=[
...
{路径:'game',组件:GameComponent,数据:{depth:3},解析:{game:GameResolverService},
{路径:'endGame',组件:EndGameComponent,数据:{depth:4},
{路径:'nextrond',组件:nextrondComponent,数据:{depth:5}}
]
@NGD模块({
声明:[
...
],
进口:[
...
],
引导:[AppComponent],
提供者:[游戏服务,游戏解决服务]
})
//创建-game.component.ts
...
从“../game.service”导入{GameService};
@组成部分({
选择器:“应用程序创建游戏”,
templateUrl:“./create game.component.html”,
样式URL:['./创建game.component.css'],
})
导出类CreateGameComponent实现OnInit{
//@HostListener('window:popstate',['$event']))
构造函数(专用游戏服务:游戏服务,专用路由器:路由器){
}
//game.component.ts
@组成部分({
选择器:“应用程序游戏”,
templateUrl:'./game.component.html',
样式URL:['./game.component.css']
})
导出类GameComponent实现OnInit{
游戏:游戏;
构造函数(专用游戏服务:游戏服务,专用路由器:路由器,专用socketService:socketService,专用路由:ActivatedRoute){
this.game=this.route.snapshot.data['game']
}
}
关于角度依赖注入的层次结构,有什么我不了解的吗?我需要GameService在应用程序的所有部分都是一个单例服务,所以我需要在不创建新实例的情况下将单例实例注入到Game Resolver服务中。在我的app.co中进行了大量搜索后,我终于意识到了这一点在使用
providedIn:'root'
方法时,@Component decorator中仍然定义了提供程序
数组。Dzhavat Ushev是对的,您不能同时使用这两个。我以为我已经摆脱了所有提供程序
声明,但我不知道其中有一个。它是Works现在非常完美。感谢你们的帮助。可能的副本应该在服务本身的“根”中提供,或者将它们作为模块中提供程序数组的一部分添加,而不是两者都添加。@DzhavatUshev感谢你们向我指出这一点。在中实现时,我仍然得到多个GameService实例g但是可以选择。多个实例是什么意思?尝试将GameService
注入另一个服务和/或组件,看看constructor
是否运行?我的意思是,当GameService注入组件时,GameService构造函数不会被调用。但是当它注入GameSolve时调用GameService构造函数。