角2儿童路线
问题描述:
我已经配置我的路由是这样的:角2儿童路线
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent },
{
path: 'contact', component: ContactComponent,
children: [
{
path: '',
component: ContactComponent
},
{
path: 'list',
component: ContactlistComponent
},
]
},
// { path: 'list', component: ContactlistComponent },
{ path: 'configuration/forms', component: FormsComponent }
];
这里是我的链接:
<a [routerLink]="/contact/list">List</a>
<a [routerLink]="/contact">Add New</a>
所以,当我点击这两个链接我的联系纽带越来越开放。
这里,当我这样做它的工作原理:
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent },
{
path: 'contact', component: ContactComponent,
},
{ path: 'contact/list', component: ContactlistComponent },
{ path: 'configuration/forms', component: FormsComponent }
];
什么,我做错了什么?
答
您需要将pathMatch: 'full'
添加到您的第一条子路线(具有空路径的路线),否则contact/list
也将匹配第一条路线。
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent },
{
path: 'contact', component: ContactComponent,
children: [
{
path: '',
component: ContactComponent,
pathMatch: 'full'
},
{
path: 'list',
component: ContactlistComponent
},
]
},
// { path: 'list', component: ContactlistComponent },
{ path: 'configuration/forms', component: FormsComponent }
];
答
您可以使用父路由使用此代码
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent },
{
path: 'contact', component: ContactComponent,children:ChilddataRoute
},
// { path: 'list', component: ContactlistComponent },
{ path: 'configuration/forms', component: FormsComponent }
];
您可以使用儿童路线与其他打字稿文件
export const ChilddataRoute: Routes = [
{ path: '', component: ContactComponent },
{ path: '/list', component: ContactlistComponent },
];
+0
Bimal我还没有尝试过这个解决方案,但我会尝试,因为通过这种方式管理路线会容易得多。谢谢 –
+0
不客气 –
它的工作与代码的微小变化。我在我的问题中更新了这个答案中的代码。它没有工作,因为我已经给出了父组件,这就是为什么它把我带到那个默认的联系组件。 –