0

¿Como puedo hacer que una ruta "child" se ejecute automaticamente? A ver, tengo un archivo de rutas en el que hay:

const appRoutes = [
    {path: 'home', component: HomeComponent},
    {path: 'proyect-list', component: ProyectList,
        children:[
            {path: 'comp-image-list', component: ImageList, outlet: 'proyectList'},
            {path: 'comp-audio-list', component: AudioList, outlet: 'proyectList'},
            {path: 'comp-video-list', component: VideoList, outlet: 'proyectList'},
            {path: 'comp-web-list', component: WebList, outlet: 'proyectList'}
        ]
    },
    {path: 'singInNow', component: LoginComponent},
    {path: 'image-detail/:id', component: ImageDetail},
    {path: 'audio-detail/:id', component: AudioDetail},
    {path: 'audio-add', component: AudioAdd},
    {path: 'audio-update/:id', component: AudioUpdate},
    {path: 'video-detail/:id', component: VideoDetail},

El archivo no está copiado completo, pero para que os hagais una idea. El caso es que yo voy a "proyect-list" que es una de las rutas principales del sitio. Y dentro de esta página, tengo otro "router-outlet" que contiene esas rutas "child". Lo que yo pretendo es que se presente por ejemplo en el router-outlet de esta el "comp-image-list" sin que yo tenga que dar al enlace que hace que se presente ese componente. ¿Puede llegar a hacerse? He estado leyendo la documentación de Routing de Angular 2, y no he conseguido sacar nada en claro respecto a esto, o no lo he sabido buscar.

El html de la página "proyect-list" es este:

<nav class="menuProyect">
        <a [routerLink]="[{ outlets: { 'proyectList': ['comp-image-list'] } }]" class="menuProyectLink">Imagen</a>
        <a [routerLink]="[{ outlets: { 'proyectList': ['comp-audio-list'] } }]" class="menuProyectLink">Audio</a>
        <a [routerLink]="[{ outlets: { 'proyectList': ['comp-video-list'] } }]" class="menuProyectLink">Video</a>
        <a [routerLink]="[{ outlets: { 'proyectList': ['comp-web-list'] } }]" class="menuProyectLink">Web</a>
</nav>
<router-outlet name="proyectList"></router-outlet>

1 respuesta 1

3

Debes de añadir en el array de rutas children la ruta por defecto:

{ path: '', redirectTo: 'comp-image-list', pathMatch: 'full' },
{ path: 'comp-image-list', component: ImageList }
2
  • Muchas gracias dddenis. Era evidente como había que hacerlo, pero no me ha dado el coco para haberme dado cuenta de ello. Muchas gracias por la sencillez y rapidez a la hora de responder. Funciona correctamente de la forma que me has comentado. Gracias.
    – H. Díaz
    Commented el 11 oct. 2017 a las 15:18
  • Me alegro @H.Díaz , no te preocupes, el tema de las rutas de Angular la verdad no están muy claras en mi opinión.
    – dddenis
    Commented el 11 oct. 2017 a las 15:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.