如何访问服务中的全局变量？

我有两个组件.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

如何访问服务中的全局变量？

回答

相关问题