Variable in Typoskript

Question

setzen

Ich benutze angular2 mit Typoskript. In einem der Service Ich gründe und bekommen den Wert einer Variablen wie folgt aus:

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

@Injectable() 
export class UserProfileService { 
    isLoggedIn: boolean; 

    constructor() { 

    } 

    setLoggedInStatus(status) { 
     console.log('status: ', status); 
     this.isLoggedIn = status; 
     console.log('this.isLoggedIn : ', this.isLoggedIn) //setting to true or false here 
    } 

    getLoggedInStatus() { 
     return this.isLoggedIn; 
    } 
} 

aber wenn ich versuche, den Wert mit getLoggedInStatus() zu bekommen, erhalte ich jedes Mal nicht definiert. Warum passiert das?

Einstellung hier

import {Component} from '@angular/core'; 
import {FormControl, FormGroup, Validators} from '@angular/forms'; 
import {SharedService} from '../../shared.service'; 
import {UserProfileService} from '../../authComponent/login/user-profile.service'; 

@Component({ 
    selector: 'login', 
    templateUrl: 'app/components/authComponent/login/login.component.html', 
    providers: [SharedService, UserProfileService] 
}) 

export class LoginComponent implements OnInit { 
    matched: boolean = false; 

    constructor(private sharedService: SharedService, private userService: UserProfileService) { 
    } 

    ngOnInit() { 
     this.myForm = new FormGroup({ 
      email: new FormControl('', [Validators.required]), 
      password: new FormControl('', [Validators.required]) 
     }) 
    } 

    submit({value, valid}) { 
     if (!valid) { 
      return; 
     } 
     else { 
      this.sharedService.getData('users') 
       .subscribe(result => { 
        console.log('result: ', result, 'value passed: ', value) 
        result.forEach((record) => { 
         if ((record.email == value.email && record.password == value.password) && !this.matched) { 
          this.matched = true; 
         } 
         else { 
          this.matched = false; 
         } 
        }); 

        if (!this.matched) 
         console.log('wrong credentials entered'); 
        this.userService.setLoggedInStatus(this.matched); 
       }) 

     } 
    } 
} 

hier bekommen

import {Injectable} from '@angular/core'; 
import { 
    CanActivate, 
    CanActivateChild, 
    Route, 
    Router, 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot 
} from '@angular/router'; 

import {UserProfileService} from './authComponent/login/user-profile.service'; 

@Injectable() 
export class CanActivateAuthGuard implements CanActivate, CanActivateChild { 
    constructor(private userProfileService: UserProfileService, private router: Router) { 
    } 

    canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     return this.canActivate(next, state); 
    } 

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     console.log('this.userProfileService.getLoggedInStatus: ', this.userProfileService.getLoggedInStatus()) 
     if (this.userProfileService.getLoggedInStatus()) { 
      return true; 
     } 
     this.router.navigate(['/login'], {queryParams: {redirectTo: state.url}}); 
     return false; 
    } 
} 

Answer 1

Haben rufen Sie getLoggedInStatus() bevor jemals Aufruf `setLoggedInStatus (..)?

Wenn dies der Fall ist, haben Sie Ihre boolesche Membervariable isLoggedIn nie initialisiert und bleibt daher als undefiniert.

Sie können dieses Problem umgehen, indem isLoggedIn initialisiert, wenn Sie es

export class UserProfileService { 
    isLoggedIn = false; // or true 
..... 

erklären und feststellen muss ich den Typ nicht erklären - Typoskript gefolgert es aus dem Wert, den er mit initialisiert wurde.

EDIT:

mit dem aktualisierten Post, bemerkte ich, dass Sie Ihren Dienst zu Ihrer Komponente Liste der Anbieter hinzugefügt. Je nachdem, wie Sie diesen Dienst verwenden möchten, möchten Sie dies nicht tun. Das Hinzufügen eines Dienstes zur Liste der Anbieter einer Komponente bedeutet Angular mehr oder weniger, dass ich nicht möchte, dass diese Komponente eine Instanz meines Dienstes für andere Benutzer freigibt - ich möchte, dass diese Komponente über eine eigene Instanz dieses Dienstes verfügt.

Basierend auf Ihrer Verwendung möchten Sie diesen Dienst tatsächlich zur Providerliste Ihres AppModuls hinzufügen.

see this other question for almost the same scenario

Answer 2

Dienstleistungen in Winkel sind injizierbaren Sinn, sie bei Bedarf aufgerufen werden. Wenn Sie mit Konfigurationsvariablen und globale Variablen sind, können Sie sie verwenden, indem Sie in der AppModule erklärt, wie unten

import {Component, NgModule} from '@angular/core' 
    import {BrowserModule} from '@angular/platform-browser' 

    @Component({ 
     selector: 'my-app', 
     template: ` 
     <div> 
      <h2>{{name}} Sample</h2> 
      {{myConfiguration | json}} 
     </div> 
     `, 
    }) 
    export class App { 
     name:string; 
     myConfiguration:any=myConfiguration; 
     constructor() { 
     console.log(myConfiguration); 
     this.name = 'Global Configuration' 
     } 
    } 

    @NgModule({ 
     imports: [ BrowserModule ], 
     declarations: [ App ], 
     bootstrap: [ App] 
    }) 
    export class AppModule { 
     var myConfiguration={id:1,devmode:true}; 

    } 

LIVE DEMO

Answer 3

Um eine Singleton Dienstinstanz haben nur diesen Dienst als Anbieter hinzuzufügen in einem Modul und bieten Sie diesen Service an anderen Orten nicht an.

Der einfachste Weg ist, den Dienst app.modules.ts Anbieter hinzuzufügen.

app.module.ts:

@NgModule({ 
    ... 
    providers:[ 
    UserProfileService 
    ] 
}) 
export class AppModule {} 

, die den Job tun.