錯誤：無法匹配任何路線。網址段： - 角2

我是angular2的新手。我正試圖瞭解如何在特定模板中使用多個<router-outlets>。我已經去了很多QA，但無法解決我的錯誤。錯誤：無法匹配任何路線。網址段： - 角2

router.module.ts

const routes: Routes = [ 
{ 
    path: '', 
    redirectTo: 'one', 
    pathMatch: 'full' 
}, 
{ 
    path: 'two', 
    component: ClassTwo, children: [ 
     { 
      path: 'three', 
      component: ClassThree, 
      outlet: 'nameThree', 
     }, 
     { 
      path: 'four', 
      component: ClassFour, 
      outlet: 'nameFour' 
     } 
    ] 
},];

component1.html

<h3>In One</h3> 

<nav> 
    <a routerLink="/two" class="dash-item">...Go to Two...</a> 
    <a routerLink="/three" class="dash-item">... Go to THREE...</a> 
    <a routerLink="/four" class="dash-item">...Go to FOUR...</a> 
</nav> 

<router-outlet></router-outlet>     // Successfully loaded component2.html 
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three' 
<router-outlet name="nameFour" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'

component2.html

<h3>In two</h3>

component3.html

<h3>In three</h3>

component4.html

<h3>In four</h3>

下面的截圖是我的電流輸出：

當我點擊...去兩個。 ..在兩個被打印。但點擊其他兩個鏈接給我的錯誤不能匹配任何路由

來源

2017-04-27 saugandh k

路由器的出口是另一種RO和你有導航 –

以及如何處理它們，我應該給那個先生？ @RomanC –

我認爲它在[router]（https://angular.io/docs/ts/latest/guide/router.html）中。 –

解決了我自己。也做一些小的結構變化。從路由組件1到組件2由單個<router-outlet>完成。 COMPONENT2到Comonent3和Component4由多個<router-outlet name= "xxxxx">完成所得內容是：

Component1.html

<nav> 
    <a routerLink="/two" class="dash-item">Go to 2</a> 
</nav> 
    <router-outlet></router-outlet>

Component2.html

<a [routerLink]="['/two', {outlets: {'nameThree': ['three']}}]">In Two...Go to 3 ...  </a> 
<a [routerLink]="['/two', {outlets: {'nameFour': ['four']}}]"> In Two...Go to 4 ...</a> 

<router-outlet name="nameThree"></router-outlet> 
<router-outlet name="nameFour"></router-outlet>

的'/two'代表父組件，['three']和['four']代表鏈接到組件2的各個子組的鏈接。。 Component3.html和Component4.html與問題中的相同。

router.module。TS

const routes: Routes = [ 
{ 
    path: '', 
    redirectTo: 'one', 
    pathMatch: 'full' 
}, 
{ 
    path: 'two', 
    component: ClassTwo, children: [ 

     { 
      path: 'three', 
      component: ClassThree, 
      outlet: 'nameThree' 
     }, 
     { 
      path: 'four', 
      component: ClassFour, 
      outlet: 'nameFour' 
     } 
    ] 
},];

來源

2017-04-28 12:10:00

請修改router.module.ts爲：

const routes: Routes = [ 
{ 
    path: '', 
    redirectTo: 'one', 
    pathMatch: 'full' 
}, 
{ 
    path: 'two', 
    component: ClassTwo, children: [ 
     { 
      path: 'three', 
      component: ClassThree, 
      outlet: 'nameThree', 
     }, 
     { 
      path: 'four', 
      component: ClassFour, 
      outlet: 'nameFour' 
     }, 
     { 
      path: '', 
      redirectTo: 'two', 
      pathMatch: 'full' 
     } 
    ] 
},];

，並在您component1.html

<h3>In One</h3> 

<nav> 
    <a routerLink="/two" class="dash-item">...Go to Two...</a> 
    <a routerLink="/two/three" class="dash-item">... Go to THREE...</a> 
    <a routerLink="/two/four" class="dash-item">...Go to FOUR...</a> 
</nav> 

<router-outlet></router-outlet>     // Successfully loaded component2.html 
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three' 
<router-outlet name="nameFour" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'

來源

2017-04-27 12:21:25 sainu

錯誤：無法匹配任何路線。網址段： - 角2

回答

相關問題