如何访问服务内的全局变量?
How to access a global variable inside a service?
我有两个 components.LoginComponent 和 LandingComponent.I 必须在验证用户名和密码后从登录页面路由到登录页面。但是我无法访问 global/page 变量服务中的路由器。它显示错误 "TypeError: Cannot read property 'router' ".
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!!");
}
});
}
}
登录服务
import {Injectable} from 'angular2/core';
@Injectable()
export class LoginService {
Login(){
return Promise.resolve(login);
}
}
var login={
username:"sampleuser",
password:"a"
}
我看到您将服务定义到登录组件的提供程序中:
@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)?
您只能在具有路由的组件中注入路由器。
您可能需要仅在根组件上提供 LoginService
(或者 bootstrap(...)
)以获取共享实例。
您可以将Router
注入您的LoginService
。
this.router = _router
在你的构造函数中是错误的
private _router 在你的构造函数中创建一个实例变量在你的 class 中。因此,要访问它,您必须在构造函数中将 this. 添加到变量 _router 中。
改为
this.router = this._router;
所以构造函数最终会像这样
constructor(private _loginService: LoginService,private _router: Router) {
this.router = this._router;
}
您应该在登录组件中使用这样的 arrow-functions:
this._loginService.Login().then( (loginValues) => {
if(loginValues.username=="sampleuser" && loginValues.password=="a"){
this.router.navigate(['LandingPage']);
}
else{
alert("Invalid Username or Password!!");
}
});
这不会改变函数内的this。否则,this 不会指向您的 LoginComponent 实例,并且无法找到您的路由器。
我有两个 components.LoginComponent 和 LandingComponent.I 必须在验证用户名和密码后从登录页面路由到登录页面。但是我无法访问 global/page 变量服务中的路由器。它显示错误 "TypeError: Cannot read property 'router' ".
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!!");
}
});
}
}
登录服务
import {Injectable} from 'angular2/core';
@Injectable()
export class LoginService {
Login(){
return Promise.resolve(login);
}
}
var login={
username:"sampleuser",
password:"a"
}
我看到您将服务定义到登录组件的提供程序中:
@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)?
您只能在具有路由的组件中注入路由器。
您可能需要仅在根组件上提供 LoginService
(或者 bootstrap(...)
)以获取共享实例。
您可以将Router
注入您的LoginService
。
this.router = _router
在你的构造函数中是错误的
private _router 在你的构造函数中创建一个实例变量在你的 class 中。因此,要访问它,您必须在构造函数中将 this. 添加到变量 _router 中。
改为
this.router = this._router;
所以构造函数最终会像这样
constructor(private _loginService: LoginService,private _router: Router) {
this.router = this._router;
}
您应该在登录组件中使用这样的 arrow-functions:
this._loginService.Login().then( (loginValues) => {
if(loginValues.username=="sampleuser" && loginValues.password=="a"){
this.router.navigate(['LandingPage']);
}
else{
alert("Invalid Username or Password!!");
}
});
这不会改变函数内的this。否则,this 不会指向您的 LoginComponent 实例,并且无法找到您的路由器。