对于子路由，在angular2中的redirectTo

Question

如何在使用angular2中的参数的子路由的情况下使用redirectTo。我的路由结构，这样

const appRoutes: Routes = [ 
    { path: '', redirectTo : '/home', pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent}, 
    { path: 'xyz/:id', component: XYZ }, 
    { 
     path: 'abc/:id', component: ABC, 
     children: [ 
      { path: '', redirectTo : 'def', pathMatch: 'prefix' }, 
      { path: 'def/:id', component: DEF } 
     ] 
    } 
] 

但它不工作

还，什么是路由pathMatch？

Answer 1

寻找你的示例代码，如果路径'abs /：id'和'def /：id'使用相同的参数（：id），我使用的解决方案是忘记子路由配置中的参数其组件从其父路由获得：

const appRoutes: Routes = [ 
{ 
    path: ':id', 
    component: SimulatorComponent, 
    children: [ 
     { 
      path: 'home', 
      component: HomeComponent 
     } 
    ] 
} 

];

在HomeComponent，那么你赶上从父路线ID：

export class HomeComponent implements OnInit { 
    protected id: number; 

    constructor(protected route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.route.parent.params.subscribe(params => this.id = +params['id']); 
    } 

}

Answer 2

您应该重定向到home（不带斜杠），因为您的redirectTo值需要匹配给定的path，而不是任意的url。

有关pathMatch属性的详细信息，请参阅Angular2的Routing & Navigation文档中的部分。

Answer 3

pathMatch = '全' 导致路线命中时，URL匹配的剩余未匹配的段是前缀路径

pathMatch ='前缀'告诉路由器匹配重定向路由时，其余的URL 开始与重定向路由的前缀路径。

编号：https://angular.io/docs/ts/latest/guide/router.html#!#redirect

那么让我们来看看你的例子：

const appRoutes: Routes = [ 
    { path: '', redirectTo : '/home', pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent}, 
    { path: 'xyz/:id', component: XYZ }, 
    { 
     path: 'abc/:id', component: ABC, 
     children: [ 
      { path: '', redirectTo : 'def', pathMatch: 'prefix' }, //error 
      { path: 'def/:id', component: DEF } 
     ] 
    } 
] 

错误行表示如果输入类似abc/1 + ''（这是abc/1），redirectTo = 'def'（完整路径= 'abc/:id/def'）不存在。

随着pathMatch = prefix如果你输入后，因为这abc/1 + ''匹配''任何URL，因为1后每个URL都会有一个空字符串abc/1后任何它仍然会尝试redirectTo = 'def'（例如abc/1/longesturl）。