Angular 4 路由 - 所有路由都重定向到默认路由答案

【问题标题】：Angular 4 Routing - All Routes are redirected to Default RouteAngular 4 路由 - 所有路由都重定向到默认路由
【发布时间】：2018-02-14 13:38:53
【问题描述】：

我已经为我的 Angular 4 应用程序设置了一个简单的路由，它包含一个使用 Tetradata Covalent and Angular Material 创建的侧边菜单我正在使用这个 Angular 2/4 Authentication tutorial 来处理登录，但是所有子路由器链接都重定向到默认页面（仪表板）。任何帮助或建议将不胜感激。

app.routing.ts

export const APP_ROUTES: Routes = [
  {path: 'login', component: HomeComponent},
  { path: '', redirectTo: 'mainpage', pathMatch: 'full' },
  { path: '**', redirectTo: 'mainpage' },
  {
    path: 'mainpage',
    component: MainPageComponent,
    canActivate:[AuthGuard],
    children: [
      {path: 'order', component: OrderComponent},
      {path: 'dashboard', component: DashboardComponent},
      {path: 'stock', component: StockComponent},
      {path: 'Report/sales', component: SalesComponent},
      {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
      {path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
    ]
  }
];

page.component.html

<td-layout>
  <td-navigation-drawer flex sidenavTitle="EzyAgric" logo="assets:logo" name="Akorion" email="info.akorion.com">
<md-nav-list>
      <a md-list-item [routerLink]="['dashboard']">
        <md-icon>dashboard</md-icon>
        Dashboard</a>
      <md-divider></md-divider>
      <h3 md-subheader>Orders</h3>
      <a md-list-item [routerLink]="['stock']">
        <md-icon>archive</md-icon>
        Stock
      </a>
      <a md-list-item [routerLink]="['order']">
        <md-icon>shopping_cart</md-icon>
        Received Orders
      </a>
  </td-navigation-drawer>
  <td-layout-nav [toolbarTitle]="getTitle()" >
    <div class="example-scrolling-content">
      <router-outlet></router-outlet>
    </div>
  </td-layout-nav>
</td-layout>

AuthGuard.ts

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (localStorage.getItem('currentUser')) {
      // logged in so return true
      return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
    return false;
  }
}

控制台输出

【问题讨论】：

标签： angular angular4-router teradata-covalent

【解决方案1】：

在定义路由的 app.routing.ts 中，在定义所有路由后，将通配符行移至末尾。

app.routing.ts

export const APP_ROUTES: Routes = [
  {path: 'login', component: HomeComponent},
  { path: '', redirectTo: 'mainpage', pathMatch: 'full' },
  {
    path: 'mainpage',
    component: MainPageComponent,
    canActivate:[AuthGuard],
    children: [
      {path: 'order', component: OrderComponent},
      {path: 'dashboard', component: DashboardComponent},
      {path: 'stock', component: StockComponent},
      {path: 'Report/sales', component: SalesComponent},
      {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
      {path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
    ]
  },
  { path: '**', redirectTo: 'mainpage' } // this needs to be after other routes
];

由于它是通配符路线，因此由于路线顺序很重要，因此角度将在到达任何其他路线之前先到达该路线。

【讨论】：

所以现在路由显示它们正在加载，但 1 秒后仍然重定向
你的新路由器事件是什么样的？
哦，对不起，原来我已经在组件 ngOnInit 中设置了某种手动重定向，谢谢，这就是赞成票
@DeborahK 我从你的课程中学到了这一点。非常感谢你的精彩课程..:)
我很自豪！ :-)

【解决方案2】：

您必须更改您的类似代码：

export const APP_ROUTES: Routes = [
  { path: '', redirectTo: 'mainpage', pathMatch: 'full' },
  { path: 'login', component: HomeComponent },  
  {
    path: 'mainpage',
    component: MainPageComponent,
    canActivate:[AuthGuard],
    children: [
      {path: 'order', component: OrderComponent},
      {path: 'dashboard', component: DashboardComponent},
      {path: 'stock', component: StockComponent},
      {path: 'Report/sales', component: SalesComponent}
    ]
  },
  { path: '**', redirectTo: 'mainpage' }
];

【讨论】：