Angular2 Service singleton nasıl yapılır?

Question

Uygulamamda bir auth guard uygulamasına çalışıyorum. örneğin; Sadece kimliği doğrulanmış kullanıcılar, uygulamamın belirli yollarına erişebilir. here verilen tutuyu takip ediyorum.

Kullanıcı oturum açtıktan sonra, AuthService sayfamdaki bir boole değerini, kullanımın oturum açtığını belirtmek için true değerine ayarlıyorum. Uygulamanın ömrü boyunca saklanması gereken bir özellik. Kaynak kodu aşağıda Verilen

:

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 => {} 
     ); 
    } 
} 

Konsol çıkış

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 

Düzenleme: burada yanlış yapıyorum

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 {} 

app.module.ts? Herhangi bir yardım takdir edilecektir.

Answer 1

ranakrunal9'dan bahsedildiği gibi, bir bileşende veya yönergede bir hizmet sağlıyorsanız, bu tür bir bileşen örneğinin her biri için yeni bir örnek alırsınız.

Ayrıca, yüklü yüklü modüller için (loadChildren yüklü) yeni bir örnek de edinebilirsiniz. Temassız yüklenen modüller kendi kök kapsamlarını alırlar ve bu modül içinde bileşenler ve hizmetler, bu hizmet yüklü tembel modül içinde sağlanmışsa, enjekte edilen servisin farklı bir örneğini alır.

, sadece tüm uygulama için tek bir örneği olur sağlamak sadece doğrudan veya dolaylı imports: [...] kullanılarak AppModule tarafından yüklenen sizin AppModule veya modülde bunu sağlamak.

Eğer `modules` ait providers` bölümünde` içerideki bütün hizmetlerini eklemek zorunda hizmet singleton'ununu yapmak da https://stackoverflow.com/a/40981772/217408