CODEWITHSUNDEEP
javascriptangulartypescriptroutesangular-ui-router
Igor Shvets
Igor Shvets

Reputation: 547

Why i can't go on the route of the child component?

I have the following project structure: GalleryModuleModule there is a parent component GalleryComponent in which there are two child components: GalleryAddComponent and GalleryItemComponent. When I want to switch from the component GalleryComponent to the component GalleryAddComponent the address in the address bar changes, but the parent component does not disappear and the transition to the child component does not occur. Help to understand what the problem is and how to solve this problem.

GalleryRoutingModule:

const galleryRoutes: Routes = [
    {
        path: 'gallery',
        component: GalleryComponent,
        children: [
            {path: 'gallery-add', component: GalleryAddComponent},
            {path: 'galleryItem/:id', component: GalleryItemComponent},
        ]
    }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(galleryRoutes)
    ],
    exports: [RouterModule],
})

template of GalleryComponent: 

                <a routerLink="gallery-add" class="btn btn-outline-success tog">
                    Add New Post
                </a>
        <a [routerLink]="['./galleryItem', pic.id]">
            <img [src]="pic.url" alt="test" class="img-responsive">
            <p class="lead"><span>{{pic.id}}:</span>{{pic.title}}</p>
        </a>

Upvotes: 0

Views: 48

Answers (1)

Sachin Gupta
Sachin Gupta

Reputation: 5321

You need to have a different component for holding the <router-outlet></router-outlet>.You can show the GalleryComponent there if the path is ''. From you GalleryComponent you can have a link to other two components: GalleryItemComponent, GalleryAddComponent. This way, when you click on a link in your gallery component, it will be replaced by the other component.

Created a sample on stackblitz https://angular-hbb4qt.stackblitz.io

Upvotes: 2

Related Questions