Home / Questions / 108838
Accepted
H. Díaz
Asked: 2020-10-12 07:09:14 +0800 CST 2020-10-12 07:09:14 +0800 CST

Automatically present "child routes". Angle 2

  • 772

How can I make a "child" route run automatically? Let's see, I have a routes file in which there are:

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},

The file is not completely copied, but to give you an idea. The thing is that I go to "project-list" which is one of the main routes of the site. And inside this page, I have another "router-outlet" that contains those "child" routes. What I intend is that the "comp-image-list" be presented, for example, in the router-outlet of this without me having to give the link that causes that component to be presented. Can it get done? I've been reading the Angular 2 Routing documentation, and I haven't been able to get anything clear about this, or I haven't been able to find it.

The html for the "project-list" page is this:

<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>
angularjs-2.0

1 Answers

  1. Best Answer

    You must add the default route to the children route array :

    { path: '', redirectTo: 'comp-image-list', pathMatch: 'full' },
{ path: 'comp-image-list', component: ImageList }
    • 3