0
3.1K
ViewsError: No se puede hacer coincidir ninguna ruta. Segmento de URL: - Angular 2
Soy nuevo en angular2. Estoy tratando de entender cómo usar múltiples <router-outlets> en una plantilla en particular. He pasado por muchos controles de calidad aquí, pero no pude resolver mi error.
enrutador.módulo.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' } ] },];componente1.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'componente2.html
<h3>In two</h3>componente3.html
<h3>In three</h3>componente4.html
<h3>In four</h3> La siguiente captura de pantalla es mi salida actual: 
Cuando hago clic en ...Ir a dos... En dos se imprime. Pero hacer clic en otros dos enlaces me da el error No se puede hacer coincidir ninguna ruta
2 answers
Answer question0
Solucionado yo mismo. También se han hecho algunos pequeños cambios estructurales. La ruta desde Component1 a Component2 se realiza mediante un solo <router-outlet> . Component2 a Comonent3 y Component4 se realiza mediante múltiples <router-outlet name= "xxxxx"> Los contenidos resultantes son:
Componente1.html
<nav> <a routerLink="/two" class="dash-item">Go to 2</a> </nav> <router-outlet></router-outlet>componente2.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> El '/two' representa el componente principal y ['three'] y ['four'] representan el enlace a los respectivos elementos secundarios del componente2. Component3.html y Component4.html son los mismos que en la pregunta.
enrutador.módulo.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' } ] }];0
modifique su router.module.ts como:
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' } ] },];y en su componente1.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'