Angular 2 路由器跳过 redirectTo 并使用子路由

Question

我已经研究 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 可以在这里找到。

Answer 1

您只需要从 imports（从 AppMoule 的@NgModule() 中删除 DepartmentModule )如下图，

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

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

Angular 2 路由器跳过 redirectTo 并使用子路由

Angular 2 Router skips redirectTo and uses child route instead

angular2-routing

angular2-router3

angular