【问题标题】:Angular 2 Router skips redirectTo and uses child route insteadAngular 2路由器跳过redirectTo并使用子路由
【发布时间】:2016-09-11 07:42:55
【问题描述】:

我一直在修补 RC6,希望最终路由到嵌套的子组件能够开箱即用。好吧,没有这样的运气。我现在看到的效果是默认路由的redirectTo 被忽略了,相反,Angular 直接转到第一个子组件。

import { Route, RouterModule } from '@angular/router';
import { LandingPageComponent } from 'src/landing-page.component';
import { DepartmentModule } from 'src/department/department.module';

const routes: Route[] = [
  { path: '', redirectTo: 'landing-page', pathMatch: 'full' },
  { path: 'landing-page', component: LandingPageComponent },
  { path: 'department', loadChildren: () => DepartmentModule }
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(routes, {enableTracing:true});

您应该认为不输入任何 URL 会将我带到 landing-page,但不,Angular 选择 department 的原因超出了我的范围。

从那时起,一切都按预期工作,然后我可以导航到子路线

import { Route, RouterModule } from '@angular/router';
import { DepartmentComponent } from './department.component';
import { DepartmentDetailsComponent } from './department-details.component';

const departmentRoutes: Route[] = [
  { path: '', component: DepartmentComponent },
  { path: ':id', component: DepartmentDetailsComponent }
];

export const departmentRouting = RouterModule.forChild(departmentRoutes);

这里奇怪的是,我需要

<a [routerLink]="['../..']">

向后导航 1 级。可能,这两个问题是相关的。

有人知道我错过了什么吗? plnkr 可以在这里找到。

【问题讨论】:

  • 您的预期行为是什么?
  • 它是否首先加载landing-page,它有一个按钮(重定向到45号部门)?
  • 如果我不提供路径,当然要到达landing-page

标签: angular angular2-routing angular2-router3


【解决方案1】:

您只需将 DepartmentModuleimports来自 AppMoule 的 @NgModule())中删除,如下所示,

imports: [ BrowserModule, MdButtonModule, 
           RouterModule, routing]         //<---removed DepartmentModule declaration  

工作http://plnkr.co/edit/qoZ3YCwSz0mQ5o974Dt0?p=preview

【讨论】:

  • 它还修复了[routerLink],太棒了!
  • 确保不要导入延迟加载模块。它们用于延迟加载。 Angular2 会自行处理。
猜你喜欢
  • 2017-01-25
  • 2019-09-15
  • 1970-01-01
  • 2017-10-21
  • 1970-01-01
  • 2018-10-02
  • 1970-01-01
  • 2017-12-23
  • 2017-03-04
相关资源
最近更新 更多