Angular 2 - 服务中的组件变量在视图中没有更改

问题描述：

我有MainMenuComponent带有一些导航链接。部分链接适用于签名会员，部分适用于客人，部分适用于所有人。Angular 2 - 服务中的组件变量在视图中没有更改

我的主模板（master.html）看起来是这样的：

<main-menu></main-menu> 

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

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

这意味着，登录后，我仍然可以看到“登录”和“注册”菜单链接：

<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()

，它仍然空直到我刷新我的浏览器/路由**

这并不是很多的信息，你的应用程序正在发生什么。你可以创建一个重击者吗？ –

我的应用程序真的很大，我的问题有很多不相关的代码部分。请让我知道需要哪些信息来解决这个问题或获得有关它的一般知识。我更新了我的帖子以获取更多详情。 – TheUnreal

答

我与在区域和更改检测策略引起的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组件应按预期更新。

仍不更新 – TheUnreal

您能否粘贴以下代码：main-menu组件，JwtService和主引导组件？ – kbugala

Angular 2 - 服务中的组件变量在视图中没有更改

相关推荐