navigate - router events angular 6

Error: no puede coincidir con ninguna ruta. Segmento de URL:-Angular 2

Question

Soy nuevo en angular2. Estoy tratando de entender cómo usar múltiples <router-outlets> en una plantilla en particular. He pasado por muchos QA aquí pero no pude resolver mi 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>

La captura de pantalla de abajo es mi salida actual:

Cuando hago clic en ... Ir a dos ... En dos se imprime. Pero hacer clic en los otros dos enlaces me da el error No se puede encontrar ninguna ruta

Answer 1

Por favor 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 tu 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''

Answer 2

Resuelto yo mismo. Hecho algunos pequeños cambios estructurales también. La ruta de Component1 a Component2 se realiza mediante una única <router-outlet> . Component2 to Comonent3 and Component4 se realiza mediante múltiples <router-outlet name= "xxxxx"> El contenido resultante es:

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>

El ''/two'' representa el componente padre y [''three''] y [''four''] representa el enlace a los respectivos hijos del componente2. Component3.html y Component4.html son los mismos que en la pregunta.

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