Question

我遇到一个在登录时没有刷新的组件有困难。

该组件是navbar.component，其中包含指向我的页面/组件的链接。在它上面，有一个“登录”链接，呈现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设为一个observable吗？

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

Answer 2

我理解存储令牌并从user.service重定向不会触发更改检测

是的，但如果您正在使用Angular Http服务，那么当从服务返回数据时，更改检测应在您的回调函数/方法执行后运行。您的导航栏组件是否使用OnPush更改检测策略？（如果是这样，那就解释了为什么不更新。）

Günter的回答是有效的，因为异步管道不仅会自动subscribe()到observable，而且当observable发出新值时它也会调用markForCheck()。这可确保检测到组件（及其所有祖先），即使其中任何组件正在使用OnPush。

仍然使用BehaviorSubject的另一种方法，更具有必要性（而不是声明性），如下所示：

将ChangeDetectorRef注入导航栏组件
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();
     });
  }
}

Angular2 ChangeDetection还是Observable？

2 个答案: