Wie auf eine globale Variable in einem Service zugreifen?

Question

Ich habe zwei Komponenten.LoginComponent und LandingComponent.Ich muss von Login-Seite zu Landingpage nach Validierung Benutzername und Passwort. Aber ich kann nicht auf den Router innerhalb des Dienstes zugreifen, der eine globale/Seitenvariable war. Es zeigt einen Fehler "TypeError: Kann die Eigenschaft 'router' nicht lesen".

import {Component} from 'angular2/core'; 
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from 'angular2/router'; 
import {LoginService} from './login.service'; 
import {NgForm} from 'angular2/common'; 

@Component({ 
    selector: 'login', 
    templateUrl: './app/app-components/login/login.html', 
    styleUrls:['./app/app-components/login/login.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers:[LoginService] 
}) 
export class LoginComponent { 

    //DECLARATIONS 
    login={username:"",password:""} ; 
    active = true; 
    submitted = false; 
    router:Router; 

    constructor(private _loginService: LoginService,private _router: Router) { 
    this.router = _router; 
    } 

    onAuthenticate() { 
     this.submitted = true; 
     this._loginService.Login().then(function (loginValues) {   
      if(loginValues.username=="sampleuser" && loginValues.password=="a"){ 
      this.router.navigate(['LandingPage']); 
      } 
      else{ 
      alert("Invalid Username or Password!!"); 
      } 
     });  
    } 
} 

LoginService

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class LoginService { 
    Login(){ 
    return Promise.resolve(login); 
    } 
} 

var login={ 
    username:"sampleuser", 
    password:"a" 
} 

Answer 1

Sie sollten die arrow-functions wie dies in Ihrem LoginComponent verwenden:

this._loginService.Login().then((loginValues) => { 
    if(loginValues.username=="sampleuser" && loginValues.password=="a"){ 
     this.router.navigate(['LandingPage']); 
    } 
    else{ 
     alert("Invalid Username or Password!!"); 
    } 
}); 

Dies wird nicht Ändern Sie das innerhalb der Funktion. Andernfalls zeigt dies nicht auf die Instanz von Ihnen LoginComponent und Ihr Router kann nicht gefunden werden.

Answer 2

Ich sehe, dass Sie den Dienst in den Anbietern der Login-Komponente definieren:

@Component({ 
    selector: 'login', 
    templateUrl: './app/app-components/login/login.html', 
    styleUrls:['./app/app-components/login/login.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers:[LoginService] // <------- 
}) 
export class LoginComponent { 
    (...) 
} 

Wenn die Zielkomponente ist eine Unterkomponente, wird es teilen Sie die gleiche Instanz sonst Nr.

Lage sein, die gleiche Instanz zu teilen, müssen Sie den Dienst angeben, wenn Ihre Anwendung Bootstrapping:

bootstrap(AppComponent, [LoginService]); 

und entfernen Sie den Service von Anbietern von Login Service:

@Component({ 
    selector: 'login', 
    templateUrl: './app/app-components/login/login.html', 
    styleUrls:['./app/app-components/login/login.css'], 
    directives: [ROUTER_DIRECTIVES], 
}) 
export class LoginComponent { 
    (...) 
} 

Es ist die Art und Weise, wie hierarchische Injektoren in Angular2 arbeiten. Für weitere Informationen, können Sie einen Blick auf diese Frage:

• What's the best way to inject one service into another in angular 2 (Beta)?

Answer 3

Sie können nur den Router in Komponenten injizieren, die Routen haben.

Möglicherweise müssen Sie LoginService nur für die Stammkomponente (oder alternativ bootstrap(...)) angeben, um eine gemeinsame Instanz zu erhalten.

Sie könnenRouter zu Ihrem LoginService injizieren.

Answer 4

this.router = _router in Ihrem Konstruktor ist falsch

privaten _router in Ihrem Konstruktor eine Instanz-Variable in Ihrer Klasse erstellen. Damit Sie darauf zugreifen können, müssen Sie dies voranstellen. zu Ihrer Variablen _router in Ihrem Konstruktor.

Änderung es

this.router = this._router; 

so wird der Konstruktor schließlich wie sein so

constructor(private _loginService: LoginService,private _router: Router) { 
    this.router = this._router; 
}