角2儿童路线

Question

我已经配置我的路由是这样的：

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 } 
      ]; 

什么，我做错了什么？

Answer 1

您需要将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 } 
]; 

Answer 2

您可以使用父路由使用此代码

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 }, 
];