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

时间:2016-04-29 07:29:57

标签: typescript angular angular2-routing angular2-services

我有两个组件.LoginComponent和LandingComponent。我必须在验证用户名和密码后从登录页面路由到登陆页面。但是我无法访问作为全局/页面变量的服务中的路由器。它显示错误“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"
}

4 个答案:

答案 0 :(得分:3)

您只能在具有路由的组件中注入路由器。

您可能只需要在根组件(或LoginService)上提供bootstrap(...)即可获得共享实例。

可以Router注入您的LoginService

答案 1 :(得分:2)

我看到您将服务定义到登录组件的提供程序中:

@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中的工作方式。有关详细信息,您可以查看以下问题:

答案 2 :(得分:2)

this.router = _router在你的构造函数中是错误的

构造函数中的

private _router 在您的类中创建一个实例变量。因此,要访问它,您必须在构造函数中将 this。添加到变量 _router

将其更改为

this.router = this._router;

所以构造函数最终将如此

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

答案 3 :(得分:2)

您应该在LoginComponent中使用arrow-functions这样的内容:

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

这不会改变函数内部的内容。否则,这不会指向您LoginComponent的实例,并且找不到您的路由器。