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