如何訪問服務中的全局變量？

我有兩個組件.LoginComponent和LandingComponent.I必須在驗證用戶名和密碼後從登錄頁面轉到登錄頁面。但是我無法訪問全局/頁面變量的服務中的路由器。它顯示一個錯誤「TypeError：無法讀取屬性'路由器'」。如何訪問服務中的全局變量？

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!!"); 
      } 
     });  
    } 
}

login服務

import {Injectable} from 'angular2/core'; 

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

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

來源

2016-04-29 sainu

你的路由配置在哪裏？也許你錯過了添加它，因爲裝飾器是導入你的LoginComponent – Dinistro

您應該使用arrow-functions像這樣在你的LoginComponent：

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

這不會改變函數內部的這個。否則，這不會指向您的LoginComponent實例，並且您的路由器無法找到。

來源

2016-04-29 12:00:01 Dinistro

但我的錯誤更改爲：「未捕獲（承諾）：組件」 LoginComponent「沒有路由配置」。 – sainu

@sainu你在哪裏引導你的應用程序？你在哪裏有你的路由配置？看看GüntherZöchbauer的答案。 – Dinistro

好的謝謝，我的問題解決了。 – sainu

我看到你定義的服務到登錄組件的供應商：

@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 { 
    (...) 
}

如果目標組件是子組件，它會共享相同的實例否則不。

爲了能夠共享相同的情況下，你需要這樣引導您的應用程序時，指定服務：

bootstrap(AppComponent, [LoginService]);

而且從登錄服務提供者刪除該服務：

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

這是Angular2中分級注入器的工作方式。有關詳細信息，你可以看一下這個問題：

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

來源

2016-04-29 07:31:49

您只能在具有路由組件注入路由器。

您可能需要提供LoginService僅在根組件（或者bootstrap(...)）上才能獲取共享實例。

您可以注入Router到您的LoginService。

來源

2016-04-29 07:33:00

this.router = _router在你的構造函數是在構造函數創建類的實例變量錯誤

私人_router。因此，要訪問它，您必須預先配置。添加到您的構造函數中的變量_router。

將其更改爲

this.router = this._router;

這樣的構造將最終像這樣

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

來源

2016-04-29 08:43:03 oseintow

錯誤是相同的：「TypeError：無法讀取屬性'路由器'null」 – sainu

如何訪問服務中的全局變量？

回答

相關問題