Question

我有MainMenuComponent个导航链接。有些链接适用于签名成员，有些链接适用于访客，有些适用于所有人。

我的主模板（master.html）如下所示：

<main-menu></main-menu>

<div class="container">
<router-outlet></router-outlet>
</div>

在router-outlet内，我有一个login component。当我登录时，我将JwtService.jwtToken变量更改为用户令牌。（服务变量）

这意味着登录后，我仍然可以看到＆＃34;登录＆＃34;和＆＃34;注册＆＃34;菜单链接：

<li *ngIf="!JwtService.getToken()" [class.active]="isRouteActive(['/Login'])"><a [routerLink]="['Login']">Login</a></li>
        <li *ngIf="!JwtService.getToken()" [class.active]="isRouteActive(['/Register'])"><a [routerLink]="['Register']">Register</a></li>
        <li *ngIf="JwtService.getToken()" [class.active]="isRouteActive(['/Fight'])"><a [routerLink]="['Fight']">Fight</a></li>
        <li *ngIf="JwtService.getToken()"><a (click)="logOut()">Log Out</a></li>

为什么JwtService.getToken（）在我的<router-outlet>中被更改但在我的主菜单组件之外，它没有更新？（除非我手动刷新页面）

**换句话说：使用jwtService.setToken("MY_TOKEN");登录后更改服务变量时，我视图中的以下表达式不会更改：

JwtService.getToken()

并且在我刷新浏览器/路由**之前它仍为空

Answer 1

由于区域和更改检测策略导致Angular2中router-outlet以外的组件出现了同样的问题。

您可以使用ApplicationRef.tick()方法强制Angular2检查完整的组件树。

在login组件中：

添加对ApplicationRef

的引用

import {ApplicationRef} from 'angular2/core';

将ApplicationRef注入构造函数：

constructor(public appRef: ApplicationRef)

然后当您收到来自身份验证服务的响应时，强制Angular2应用再次进行更改检测：

this.appRef.tick(); // this will refresh the bindings

您的main-menu组件应按预期更新。

Angular 2 - 来自服务的组件变量在视图中不会更改

1 个答案: