我来自ng1环境,目前我正在创建ng2应用程序与所有可用的功能。在问之前,我一直在探索google和stackoverflow的问题,但由于angular 2在api架构上的发展如此之快,而且大多数答案都已经过时,所以没有运气。
我的例子:
我有一个带有属性user的auth provider(服务),我想观察用户并在多个组件(navbar、sidebar等)中做出反应。
我试过的:
@Injectable();
export class Auth {
private user;
authorized: EventEmitter<boolean>;
constructor(public router:Router){
this.authorized = new EventEmitter<boolean>();
}
login(user, token):void{
localStorage.setItem('jwt', token);
this.user = _.assign(user);
this.authorized.emit(<boolean>true);
this.router.parent.navigateByUrl('/');
}
}
/***************/
@Component({...})
export class NavComponent {
public isAuthroized: boolean = false;
constructor(Auth:Auth){
Auth.authorized
.subscribe((data) => this.onUserChanged(data));
}
onUserChanged(user){
alert('USER:' + user.email);
this.isAuthroized = true;
}
}
/****************/
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
ELEMENT_PROBE_PROVIDERS,
HTTP_PROVIDERS,
MapLoader,
Auth
])
但是运气不好。我应该使用Observable EventEmitter还是有其他正确的方法来处理这种情况?在ng1中,只要在服务的属性上设置$watch就可以了。谢谢!
编辑:
我向身份验证服务添加了新方法:
...
userUpdated: EventEmitter<boolean>;
constructor(public router:Router){
this.userUpdated = new EventEmitter<any>();
}
...
logout(returnUrl?: string): void{
delete this.user;
localStorage.removeItem('jwt');
this.userUpdated.emit(undefined);
if(!_.isEmpty(returnUrl)){
this.router.parent.navigateByUrl(returnUrl);
}
}
现在事件被调用了,为什么这对注销而不是登录有效?
编辑2:
export class LoginPageComponent {
error: string;
constructor(public http: Http, public router: Router, public Auth:Auth){
}
login(event, email, password){
...
this.http.post('/api/login', loginModel, {headers: headers})
.map((res) => res.json())
.subscribe((res: any) => {
this.Auth.login(res.user, res.ADM_TOKEN);
}, (error) => this.error = error._body);
}
}
断然的
愚蠢的错误..我在提供者数组[auth]的navcomponent中留下了…所以它是不同于全局身份验证的对象。对不起伙计们!希望这个问题能对安格拉的新人有所帮助。谢谢你的努力。
最佳答案
我假设您正在将Auth
添加为每个组件的提供者。这将为每个组件创建类的新实例。
仅在bootstrap(AppComponent, providers: [...])
中添加或仅在AppComponent
上添加。