Angular 2路由器导航到url，但仍呈现源组件

我试图用angular2创建一个身份验证系统，我使用angular2 jwt，一切正常，但我遇到的问题是，当未经身份验证的用户尝试访问受限路由时，为了处理这个问题，我检查用户是否通过了ngOnInit（）函数的身份验证，如果没有，用户应该重定向到登录页面，在我的例子中，url会更改，但它仍然呈现已访问的组件模板，以下是我的代码：

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";

import {UserService} from "../services/user.service";

@Component({
  selector: 'app-home',
  templateUrl: '../templates/home.component.html',
  styleUrls: ['../../assets/styles/home.component.css']
})
export class HomeComponent implements OnInit {

full_name: string;
constructor(private userService: UserService, private router: Router){}

ngOnInit() {
  if(this.userService.isTokenExpired()){
    this.router.navigate([''])
  }else{
    this.userService.getSessionData()
      .subscribe(
        data => {
          let usrData = data.data.user;
          localStorage.setItem('user', JSON.stringify(usrData));
          this.full_name = usrData.firstname+" "+usrData.lastname;
          if(usrData.role == 'admin'){
            this.router.navigate(['admin']);
          }
        },
        err => console.log(err)
      );
    }
  }
}

下面是它的外观：

您可以注意到没有数据

奇怪的是，另一个组件（AdminComponent）中的相同代码工作正常

这是我的app.routes.ts文件：

import {Routes} from "@angular/router";

import {AdminComponent} from "./components/admin.component";
import {LoginComponent} from "./components/login.component";
import {HomeComponent} from "./components/home.component";
import {GroupsComponent} from "./components/groups.component";
import {TpComponent} from "./components/tps.component";
import {TraineeComponent} from "./components/trainee.component";
import {RegisterComponent} from "./components/register.component";
import {HometpsComponent} from "./components/hometps.component";

export const routes: Routes = [
  { path: '', component: LoginComponent},
  { path: 'login', component: LoginComponent},
  { path: 'register', component: RegisterComponent},
  { path: 'admin', component: AdminComponent, children: [
    { path: '',
      redirectTo: '/admin/tps',
      pathMatch: 'full'},
    { path: 'tps', component: TpComponent},
    { path: 'groupes', component: GroupsComponent},
    { path: 'stagiaires', component: TraineeComponent}
  ]},
  { path: 'home', component: HomeComponent, children: [
    { path: '',
      redirectTo: '/home/tps',
      pathMatch: 'full'},
    { path: 'tps', component: HometpsComponent},
  ]},
  { path: '**', component: LoginComponent}
];

---

感谢您的帮助。

看来我的路由工作得很好，问题出在我的子组件HometpsComponent的ngOnInit（）中，当时我正在从localStorage读取数据（如果用户未登录或会话已过期，则数据为空），这会生成错误并阻止路由器导航

---

谢谢。

您希望它走哪条路？我在截图中没有看到url更改谢谢你的重播，它已经更改了，我输入了更改后的url，但加载的模板是HomeComponent的模板，我只是做了一些调试，发现路由器抛出错误：无法激活已激活的插座