[英]Angular2 ChangeDetection or Observable?
我遇到了无法在登录时刷新的组件的问题。
该组件是navbar.component,其中包含指向我的页面/组件的链接。 在它上面,有一个“ login”链接,呈现了login.component,可以在其上提供用户名和密码,然后单击“登录”按钮。 login.component使用user.service,后者使用login.component提供的用户名和密码来调用后端,存储接收到的令牌并重定向到“ /”。
此时,应该隐藏navbar.component上的“登录”链接,并显示“退出”链接,但是直到我单击导航条上的其他链接之一,什么都没有发生。
2个链接如下:
<a [hidden]="userService.isLoggedIn" [routerLink]="['Login']">Login</a>
<a [hidden]="!userService.isLoggedIn" (click)="userService.logout();" href="javascript:void(0)">Logout</a>
我知道存储令牌并从user.service重定向不会触发更改检测,并且我的属性userService.isLoggedIn不是可观察到的,所以我知道我丢失了一些内容,但不确定该采用/应该采用的方法。
我尝试注入ApplicationRef来调用tick()方法,希望这将触发更改检测,但失败了。
我应该使我的属性userService.isLoggedIn可观察吗?
export class UserService {
isLoggedIn:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
}
@Component({
...
template: `
<a [hidden]="userService.isLoggedIn | async" [routerLink]="['Login']">Login</a>
<a [hidden]="!(userService.isLoggedIn | async)" (click)="userService.logout();" href="javascript:void(0)">Logout</a>
`
})
export class MyComponent {
constructor(private userService: UserService) {}
}
我了解存储令牌并从user.service重定向不会触发更改检测
是的,但是如果您使用的是Angular Http服务,则当从该服务返回数据时,更改检测应在执行回调函数/方法之后运行。 您的导航栏组件是否使用OnPush
更改检测策略? (如果是这样,那就可以解释为什么它不会更新。)
君特的回答工作,因为异步管道不仅自动subscribe()
S到观察的,但它也要求markForCheck()
当新的值被观察到的发射。 这样可以确保检测到组件(及其所有祖先),即使其中任何一个正在使用OnPush
。
仍然需要使用BehaviorSubject的另一种方法(它比命令性方法更具强制性)如下:
subscribe()
到可观察的服务 detectChanges()
。 这将检查组件及其子组件(如果有)。 这可能比使用markForCheck()
更有效,尤其是在NavBar没有任何子代的情况下。 但是考虑到登录/注销可能是罕见的事件,效率可能并不重要。 但是,我更喜欢在仅更改视图/组件状态(根据我在下文中的实现方式,此处就是这种情况)而不是应用程序状态时使用detectChanges()
,即会影响多个组件的内容,因此markForCheck()
会更合适。 @Component({
...
template: `
<a [hidden]="userIsLoggedIn" [routerLink]="['Login']">Login</a>
<a [hidden]="!userILoggedIn" (click)="userService.logout()">Logout</a>
`
})
export class NavBar {
userIsLoggedIn = false;
constructor(private userService: UserService, private _ref: ChangeDetectorRef) {}
ngOnInit() {
this.userService.isLoggedIn.subscribe( userIsLoggedIn => {
this.userIsLoggedIn = userIsLoggedIn;
this._ref.detectChanges();
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.