如何强制路由器更新 Angular 2 中的当前路由？答案

【问题标题】：How do I force the router to update the current route in Angular 2?如何强制路由器更新 Angular 2 中的当前路由？
【发布时间】：2017-09-19 01:57:33
【问题描述】：

我在角度 2 中有一个主页组件和一个导航面板组件。当用户单击导航面板（侧边栏）上的注销时，通过将路由器登录到控制台，当前 url 正确报告为“/login”。当用户再次登录时，导航面板中的路由器实例将当前路由报告为“/login”，当用户登录后，路由器应该将他们带到主页。结果，用户永远无法通过登录屏幕，浏览器中的视图和 url 也不会更新。

到目前为止，我已经尝试了以下方法：

手动清除浏览器缓存并刷新页面（这似乎解决了问题）
将 router.navigate 调用封装在对 ngZone.run() 的调用中
在主组件的构造函数中清除 Angular 2 的模板缓存。

以下是一些相关的代码部分：用户登录后处理导航的方法（在login.component.ts中）

private doAfterLoggedIn() {
    let returnRoute = this.route.snapshot.queryParams["ReturnUrl"] || "/";
    this.toaster.toast({
        title: `Welcome back!`,
        duration: 2000
    });
    this.router.navigate([returnRoute]);
}

Home 组件的路由：

{
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    resolve: { author: RouteAuthorResolver },
    data: {
        panelsectionName: "home"
    }
},

导航面板组件中的部分注销方法：

doLogout() {
    // leave immediately
    this.router.navigate(["/login"]);
}

【问题讨论】：

对于初学者来说，你正在尝试做的应该是有效的。我在 Pluralsight 上的 Angular Routing 课程中做同样的事情。 returnRoute 的值是多少？此外，您只需要在使用重定向时使用pathMatch，而不是在导航到组件时。
嗨，黛博拉，感谢您的帮助。我已经从路线中删除了 pathMatch ，但没有运气。 returnRoute 在代码中看起来像这样：“/Projects”，在 url 中像这样：“localhost:44358/login?ReturnUrl=%2FProjects”。
@DeborahK 我周末也看了你的课程，我认为问题可能是路线的顺序，但它们都在一个模块中，而不是多个模块模块。
附加注释：home 组件将当前 url 报告为“/”，导航面板组件将其报告为“/login”，因此导航面板似乎优先于当前网址。
你能组织一个 plunker 来演示这个问题，以便我们看一些更具体的东西吗？

标签： javascript html angular ecmascript-6 angular2-routing

【解决方案1】：

假设你正在引导组件是HomeComponent，所以在它的构造函数中检查登录，否则重定向到登录组件。

constructor(activatedRoute: ActivatedRoute,router:Router){
     if(this.activatedRoute.url !== 'login'){
         if(!userService.geToken()){
               this.router.navigate(["/login"]);
         }
     }
}

【讨论】：

感谢您的建议，但我对此也没有任何运气。导航仍然没有发生。