Блог

У меня проблемы с маршрутами и с дочерними компонентами внутри другого дочернего элемента, которые не отображаются на экране при нажатии на кнопку. Я думаю, что это проблема синтаксиса, но я ее не вижу. Я ценю вашу помощь.

файл app.routes.ts:

 import { RouterModule, Routes }    from '@angular/router';

import { HomeComponent }           from "./components/home/home.component";
import { CrearAvisoComponent }     from "./components/contenido/crear-aviso/crear-aviso.component";
import { SesionComponent }         from "./components/contenido/sesion/sesion.component";

//child components
import { SesionCuentaComponent }   from "./components/contenido/sesion-cuenta/sesion-cuenta.component";
import { SesionMensajesComponent } from "./components/contenido/sesion-mensajes/sesion-mensajes.component";

//sub-child components
import { SesionMsjInComponent }    from  "./components/contenido/sesion-mensajes/sesion-msj-in/sesion-msj-in.component";
import { SesionMsjSendComponent }  from  "./components/contenido/sesion-mensajes/sesion-msj-in/sesion-msj-in.component";



const APP_ROUTES: Routes = [
  { path: 'home',        component: HomeComponent },
  { path: 'crear-aviso', component: CrearAvisoComponent },
  { path: 'sesion',      component: SesionComponent, children: [
    { path: 'sesion-cuenta',   component: SesionCuentaComponent, outlet: 'sesionr'},
    { path: 'sesion-mensajes', component: SesionMensajesComponent, outlet: 'sesionr', children: [
        { path: 'sesion-msj-in',   component: SesionMsjInComponent, outlet: 'mensajesr'},
        { path: 'sesion-msj-send', component: SesionMsjSendComponent, outlet: 'mensajesr'},
        { path: '**', pathMatch: 'full', redirectTo: '/sesion/(sesionr:sesion-avisos)/(mensajesr:sesion-mjs-in)'},
    ]}, 
    { path: '**', pathMatch: 'full', redirectTo: '/sesion/(sesionr:sesion-avisos)' }
  ]},
  { path: '**', pathMatch: 'full', redirectTo: 'home' }
];


export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES)
 

html-файл:

 <a [routerLink]="['/sesion', {outlets:{sesionr: ['sesion-avisos', {outlets:{mensajesr: ['sesion-msj-in'] }}] }}]">Send</a>

<router-outlet>
   <router-outlet name="sesionr">
      <router-outlet name="mensajesr"></router-outlet>
   </router-outlet>
</router-outlet>

 

Объявление в app.module.ts правильное, потому что у меня есть другие маршруты, которые работают.
Когда я нажимаю кнопку, она перенаправляет меня на «SesionComponent», но я хочу перейти к «SesionMsjInComponent».

Примечание: папки компонентов ‘SesionMsjInComponent’ и ‘SesionMsjSendComponent’ я помещаю в папку компонента ‘SesionMensajesComponent’