我有一个共享服务,我用它来存储全局变量,如身份验证令牌。我遇到问题,确保值得到更新,并且我的组件中使用了最新值。例如:
import {Injectable} from '@angular/core';
@Injectable()
export class GlobalVariablesProvider {
private auth_token: string;
constructor() {}
getAuthToken() {
return this.auth_token
}
setAuthToken(auth_token) {
this.auth_token = auth_token
}
}
然后在我的login-component
我设置了auth_token
:
this.clientService.login(user).subscribe(
successData => {
this.current_user = successData["user"]
this.globalService.setAuthToken(this.current_user.auth_token)
}
}
但是当我导航到其他页面/使用新组件时,auth_token
偶尔会失去同步(我相信如果服务正在重新初始化并丢失auth_token
值)。
this.auth_token = this.globalVarService.getAuthToken()
// occasionally returns null
有没有办法确保设置nce这个变量,在注入另一个组件后该值是否仍然存在?
答案 0 :(得分:2)
在根模块中声明服务使其成为Singleton
,因为angular具有分层注入器。
答案 1 :(得分:2)
首先,在应用的根模块中导入服务,并将其插入NgModule声明中的providers
部分。从现在开始,它将像单例一样运行,并且可用于应用中的所有组件,而不会将其传递到每个组件的providers
。
如果您希望始终将auth_token
与您注入此服务的每个组件保持同步,则可以使用rxjs
包中的主题,该主题包含在Angular安装中。关于它的帖子on Medium很好。例如:
import {Injectable} from '@angular/core';
import { Subject } from 'rxjs/Subject'
@Injectable()
export class GlobalVariablesProvider {
private auth_token: Subject<string> = new Subject<string>()
constructor() {}
getAuthToken() {
return this.auth_token
}
setAuthToken(auth_token) {
this.auth_token.next(auth_token)
}
}
然后,将其注入您需要的组件中。然后,如果您需要获取当前令牌,而不是使用从getAuthToken()
收到的值,您可以订阅它。因此,您的组件将始终与当前令牌同步:
this.globalVarService
.getAuthToken()
.subscribe(token => {
this.auth_token = token
})