错误：无法匹配任何路线。网址段： - 角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

回答

相关问题