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