Angular2 ChangeDetection 还是 Observable？

Question

我在使用登录后不刷新的组件时遇到困难。

该组件是 navbar.component，其中包含指向我的页面/组件的链接。在它上面，有一个呈现 login.component 的“登录”链接，我可以在上面提供用户名和密码，然后单击登录按钮。 login.component 使用 user.service，它使用 login.component 提供的用户名和密码调用后端，存储接收到的 token 并重定向到“/”。

此时，navbar.component 上的“登录”链接应该被隐藏并显示“注销”链接，但是在我单击导航栏上的其他链接之一之前什么也没有发生。

2个链接如下:

<a [hidden]="userService.isLoggedIn" [routerLink]="['Login']">Login</a>
<a [hidden]="!userService.isLoggedIn" (click)="userService.logout();" href="javascript:void(0)">Logout</a>

我知道存储 token 并从 user.service 重定向不会触发更改检测，而且我的属性 userService.isLoggedIn 不是可观察的，所以我知道我遗漏了一些东西，但不确定方法是什么/应该是。

我曾尝试注入(inject) ApplicationRef 来调用 tick() 方法，希望这会触发更改检测，但失败了。

我应该让我的属性 userService.isLoggedIn 成为可观察对象吗？

Answer 1

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) {}
}