角度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

あなたは、あなたはそれがコード内のマイナーチェンジで働いていた別の活字体ファイル

export const ChilddataRoute: Routes = [ 
    { path: '', component: ContactComponent }, 
    { path: '/list', component: ContactlistComponent }, 
];