如何在angular2中重新加载/刷新所有当前组件？
如何在angular2中重新加载/刷新所有当前组件？
提问于 2016-06-22 23:33:09
您好，我正在使用angularjs2 https://angular.io/docs/ts/latest/guide/router.html的新alpha组件路由器
我有一个验证用户身份的模式，然后在本地存储中创建一个JWT，它保存用户所需的信息。
我的问题是，如果用户正在查看/home路径，其中有一些内容只对登录的用户可见，但在他通过模式登录后，他必须刷新页面，以便组件将刷新并显示正确的登录信息
有没有办法让angular2刷新当前路径上的所有组件？就像页面重新加载，但不需要真正重新加载整个页面(我不想只为用户点击刷新按钮)
提前感谢
编辑:当我尝试重定向到我已经在的路线时，也许有一个功能可以强制重定向？
EDIT2:尝试使用可观察对象
@Injectable()
export class UserService {
private loggedInObservable;
constructor(private http: Http) {
this.loggedInObservable = Observable.of(this.checkIsLoggedIn());
}
checkIsLoggedIn() {
let isLoggedIn = false;
try {
isLoggedIn = tokenNotExpired();
} catch(e) {
}
console.log('returning:', isLoggedIn);
return isLoggedIn;
}
login(model, cbSuccess=null, cbError=null, cbAlways=null) {
serverPost(this, '/api/users/login', model, cbSuccess, cbError, cbAlways, (data)=> {
localStorage.setItem("id_token", data.id_token);
this.loggedInObservable.map((val) => console.log('HELLO?'));
});
}
isLoggedInObservable() {
return this.loggedInObservable;
}
}地图什么也不做(“HELLO？”没有显示)，尽管观察者有一个值，但map函数不会调用任何东西。
使用观察者：
import {Component, OnInit, OnDestroy} from '@angular/core';
import {UserService} from '../../services/userservice';
@Component({
selector: 'test-thing',
template: require('./test-thing.html'),
styles: [require('./test-thing.scss')],
providers: [],
directives: [],
pipes: []
})
export class TestThing implements OnInit, OnDestroy{
private isLoggedIn = false;
private sub: any;
constructor(private userService: UserService) {
};
ngOnInit() {
this.sub = this.userService.isLoggedInObservable().subscribe(loggedIn => {
this.isLoggedIn = loggedIn;
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}初始值正常工作，但当我尝试在成功登录(使用map)后更改该值时，没有任何反应，什么也没有发生。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-24 17:56:55
好的，看起来我需要的是一个BehaviorSubject，因为你可以将值推入它，订阅它来获取更改，它会投影出你第一次订阅它时获得的最后一个值，这正是我需要的。
我的代码现在如下：
userservice.ts
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {serverPost} from '../../functions';
import {BehaviorSubject} from 'rxjs/BehaviorSubject'
import {tokenNotExpired} from 'angular2-jwt';
@Injectable()
export class UserService {
private isLoggedInSubject: BehaviorSubject<boolean>;
constructor(private http: Http) {
this.isLoggedInSubject = new BehaviorSubject(this.checkIsLoggedIn());
}
get loggedInObservable() {
return this.isLoggedInSubject.asObservable();
}
checkIsLoggedIn() {
let isLoggedIn = false;
try {
isLoggedIn = tokenNotExpired();
} catch(e) {
}
return isLoggedIn;
}
signUp(model, cbSuccess=null, cbError=null, cbAlways=null) {
serverPost(this, '/api/users', model, cbSuccess, cbError, cbAlways, (data)=> {
localStorage.setItem("id_token", data.id_token);
this.isLoggedInSubject.next(this.checkIsLoggedIn());
});
}
login(model, cbSuccess=null, cbError=null, cbAlways=null) {
serverPost(this, '/api/users/login', model, cbSuccess, cbError, cbAlways, (data)=> {
localStorage.setItem("id_token", data.id_token);
this.isLoggedInSubject.next(this.checkIsLoggedIn());
});
}
}下面是我在组件中使用它的方式：
export class TestComponent implements OnInit, OnDestroy{
private isLoggedIn = false;
private loginSub;
constructor(private userService: UserService) {
};
ngOnInit() {
this.loginSub = this.userService.loggedInObservable.subscribe(val => {
this.isLoggedIn = val;
});
}
ngOnDestroy() {
this.loginSub.unsubscribe();
}
}这个设置非常适合我的需要。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37972508
复制相关文章
相似问题
腾讯云开发者
