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

查找示例代码，路径＆＃39; abs /：id＆＃39;和＆＃39; def /：id＆＃39;使用相同的参数（：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匹配，而不是任意网址。

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

Answer 3

pathMatch ='full'会导致路由匹配，当URL匹配的其余不匹配段是前缀路径时

pathMatch ='prefix'告诉路由器在剩余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，它仍会尝试redirectTo = 'def'（例如abc/1/longesturl），因为在此abc/1 + ''之后'' 1匹配任何网址，因为hr之后的每个网址都会包含空字符串。

redirectTo in angular2 for child routing

3 个答案: