Error: Cannot match any routes. URL Segment: - Angular 2

问题:

I am new to angular2. I am trying to understand how to use multiple <router-outlets> in a particular template. I have gone though many QA here but couldn't resolve my error.

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> 

The below screenshot is my current output:

When I click ...Go to Two... In two is printed. But clicking on other two links gives me the error Cannot match any routes

回答1:

Solved myself. Done some small structural changes also. Route from Component1 to Component2 is done by a single <router-outlet>. Component2 to Comonent3 and Component4 is done by multiple <router-outlet name= "xxxxx"> The resulting contents are :

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> 

The '/two' represents the parent component and ['three']and ['four'] represents the link to the respective children of component2 . Component3.html and Component4.html are the same as in the question.

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

回答2:

please modify your router.module.ts as:

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

and in your 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' 

文章来源: Error: Cannot match any routes. URL Segment: - Angular 2