Question

我的项目中的路线配置有点麻烦，希望有人能提供一些见解。我现在使用@ angular / router 3.0.0-rc2在Angular2 RC6中。

我有一个应用程序，可以呈现列表和个人资料页面以获取详细信息。列表和配置文件的视图显示在默认<router-outlet>中。您最初看到列表，单击其中的项目，然后显示配置文件。在个人资料html模板中，还有另一个<router-outlet name="profile">，我希望将其渲染到配置文件的各个部分。
目前，当我尝试导航到个人资料的第一部分时，我的下面的配置出现错误：

this.router.navigateByUrl("/edit/" + id + "(profile:basic)");

Error: Uncaught (in promise): Error: Cannot match any routes: 'basic'(…)

我已经在下面的路线配置中声明了它，但我显然做错了什么。

路线配置

 [
    {
        path: 'edit/:id',
        component: ClientProfile,
        children: [
           { path: '', redirectTo: 'basic', pathMatch: "full" },
           { path: 'basic', component: BasicInfo, outlet: "profile" },
            { path: 'people', component: ManagePersons, outlet: "profile" }
        ]
    },
    { path: '', component: ClientList },
    { path: '**', component: ClientList }
];

常规HTML结构

<app>
 <router-outlet>
    <client-list></client-list>
    <client-profile> 
      <ul class='nav'>...</ul>
      <router-outlet name="profile"></router-outlet>
    </client-profile>
  </router-outlet>
</app>

非常感谢任何帮助。谢谢！

更新1 将路由配置更改为以下允许我正确访问配置文件页面。但现在我似乎无法导航到个人资料的人员部分。

[
     {
        path: 'edit/:id',
        component: ClientProfile,
        children: [
            { path: '', component: BasicInfo, outlet: "profile" },
            { path: 'people', component: ManagePersons, outlet: "profile" }
        ]
    },
    { path: '', component: ClientList },
    { path: '**', component: ClientList }
];

Angular2路由配置：子路由

0 个答案: