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

【问题标题】：Angular 2 router navigate to url but still rendering the source componentAngular 2 路由器导航到 url 但仍呈现源组件
【发布时间】：2017-01-22 19:49:46
【问题描述】：

我正在尝试使用 Angular 2 创建身份验证系统，我使用了 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}
];

任何帮助将不胜感激，谢谢。

【问题讨论】：

你想让它去哪条路？我在屏幕截图中没有看到 url 变化
感谢您的重播，它已经改变了，我输入了 localhost:4200/home 网址更改为 localhost:4200 但加载的模板是那个对于 HomeComponent，我刚刚做了一些调试，我发现路由器抛出错误：无法激活已激活的插座

标签： angular angular2-routing

【解决方案1】：

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

谢谢。

【讨论】：