Angular2 सेवा सिंगलटन कैसे बनाएं?

Question

मैं अपने ऐप में एक ऑथ गार्ड को लागू करने की कोशिश कर रहा हूं। अर्थात; केवल प्रमाणित उपयोगकर्ता ही मेरे ऐप के कुछ मार्गों तक पहुंच सकते हैं। मैं here दिए गए टट का पालन कर रहा हूं।

एक बार जब उपयोगकर्ता लॉग इन हो जाता है तो मैं अपने AuthService में एक बूलियन मान बदलता हूं ताकि यह इंगित किया जा सके कि उपयोग लॉग इन है। ऐप के जीवन के माध्यम से इसे बनाए रखने की आवश्यकता है।

स्रोत कोड नीचे दिए गए:

Auth-guard.service.ts

import { Injectable }  from '@angular/core'; 
import { 
    CanActivate, Router, 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot 
}      from '@angular/router'; 
import { AuthService } from './auth.service'; 

@Injectable() 
export class AuthGuardService implements CanActivate { 
    constructor(private authService: AuthService, private router: Router) {} 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {   
    let url: string = state.url; 
    return this.checkLogin(url); 
    } 

    checkLogin(url: string): boolean { 
    console.log('Auth Guard Service: ' + this.authService.isLoggedIn); 
    if (this.authService.isLoggedIn) { return true; } 
    // Store the attempted URL for redirecting 
    this.authService.redirectUrl = url; 

    // Navigate to the login page with extras 
    this.router.navigate(['/admin', 'admin-login']); 
    return false; 
    } 
} 

auth.service.ts

import { Injectable } from '@angular/core'; 
    import { Http } from '@angular/http'; 

    import { User } from '../user/shared/user.model'; 

    import { ServiceBase } from '../../core/service.base'; 
    import { appConfig } from '../../core/app.config'; 

    @Injectable() 
    export class AuthService extends ServiceBase { 
     public isLoggedIn: boolean = false; 
     redirectUrl: string; 
     apiUrl: string; 
     constructor(private http: Http) { 
      super(); 
      this.apiUrl = appConfig.apiBaseUrl + '/users/signin'; 
     } 
     signin(user: User, successCallback, errorCallback) { 
      return this.http.post(this.apiUrl, user).subscribe(
       res => { 
        this.isLoggedIn = true; 
        successCallback(res); 
       }, 
       err => { 
        //this.isLoggedIn = false; 
        errorCallback(err); 
       } 
      ); 
     }    
    } 

login.component.ts

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 
import { Router } from '@angular/router'; 
import { User } from '../../user/shared/user.model'; 
import { AuthService } from '../auth.service'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html' 
}) 
export class AdminLoginComponent implements OnInit{ 

    user: User; 
    userLoginForm: FormGroup; 

    constructor(
     private formBuilder: FormBuilder, 
     private authService: AuthService, 
     private router: Router){ 
     this.user = new User(); 
    } 

    ngOnInit(){ 
     this.buildLoginForm(); 
    } 
    buildLoginForm() { 
     ... 
    } 
    login() { 
     if(!this.userLoginForm.valid) return false; 
     this.authService.signin(this.user, 
      response => { 
       console.log('Login Component: ' + this.authService.isLoggedIn); 
       this.router.navigate(['/admin', 'products']); 
      }, 
      response => {} 
     ); 
    } 
} 

कंसोल आउटपुट

XHR finished loading: POST "http://localhost:3000/api/users/signin". 
login.component.ts:40 Login Component: true 
auth-guard.service.ts:23 Auth Guard Service: false 

संपादित करें: app.module.ts

import { NgModule } from '@angular/core'; 
    ... 
    import { AuthGuardService } from './auth/auth-guard.service'; 
    import { AuthService } from './auth/auth.service'; 

    @NgModule({ 
     imports: [ 
      ... 
      AdminRoutingModule 
     ], 
     exports: [ 
     ], 
     declarations: [ 
      ... 
      AdminLoginComponent, 
      ... 
     ], 
     providers: [ 
      AuthGuardService, 
      AuthService, 
      ... 
     ], 
     bootstrap:[] 
    }) 
    export class AdminModule {} 

मैं गलत यहाँ क्या कर रहा हूँ? किसी भी सहायता की सराहना की जाएगी।

Answer 1

जैसा कि रानक्रुनल 9 द्वारा उल्लिखित है, यदि आप किसी घटक या निर्देश पर सेवा प्रदान करते हैं, तो आपको इस तरह के घटक उदाहरण के लिए एक नया उदाहरण मिलता है।

आपको आलसी लोड मॉड्यूल के लिए एक नया उदाहरण भी मिलता है (loadChildren के साथ लोड किया गया)। आलसी लोड मॉड्यूल इस मॉड्यूल के भीतर अपने स्वयं के रूट स्कोप और घटकों और सेवाओं को प्राप्त करते हैं, यदि सेवा उस आलसी लोड मॉड्यूल के भीतर प्रदान की जाती है तो इंजेक्शन की एक अलग घटना प्राप्त होगी।

, यह सुनिश्चित करने के लिए आप केवल अपनी पूरी आवेदन के लिए एक उदाहरण केवल अपने AppModule या एक मॉड्यूल AppModule द्वारा लोड प्रत्यक्ष या परोक्ष रूप imports: [...] का उपयोग करने में यह प्रदान करते हैं।

भी https://stackoverflow.com/a/40981772/217408