How to route on multiple components in angular 2
You have to declare one main path and childer paths for example:
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AddProject} from './add-project.component';
import {ViewProject} from './view-project.component';
import {Project} from './charity-project.component';
import {ProjectList} from './charity-project-list.component';
export const routes: Routes = [
{
path: 'project', component: Project,
children: [
{ path: '', component: ProjectList },
{ path: 'add', component: AddProject },
{ path: 'view/:id', component: ViewProject },
{ path: 'edit/:id', component: AddProject }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProjectRoutes { }
In children path you have to declare your
3) path:/inbox/all , "Load InboxMessageListComponent in Left side Box Only",
4) path:/inbox/13 , "Load InboxMessageDetailComponent in Right side Box Only"
Related videos on Youtube
Bimal Das
I am a committed and hard working individual who enjoys a challenge. In addition to strong communication skills, I am able to work effectively in a team. I can also demonstrate advanced problem-solving skills and thrive under pressure. My drive and ambition ensure I am a valuable addition to any company.
Updated on June 04, 2022Comments
-
Bimal Das almost 2 years
I have a messaging project in angular 2.
Routing Conditions:
1) path: /login , component: LoginComponent 2) path: /inbox , component: InboxMessageComponent 3) path:/inbox/all , "Load InboxMessageListComponent in Right side Box Only", 4) path:/inbox/13 , "Load InboxMessageDetailComponent in Right side Box Only"
So I created two routing module named app-routing.module.ts and inbox-routing.module.ts.
app-routing.module.ts
@NgModule({ imports: [ RouterModule.forRoot([ { path: 'login', component: LoginComponent}, { path: 'inbox', component: InboxMessageComponent }, { path: '', component: InboxMessageComponent }, { path: '**', component: NotFoundComponent } ]) ], exports: [RouterModule] })
inbox-routing.module.ts
@NgModule({ imports: [ RouterModule.forChild([ {path: '/inbox/list',component: InboxMessageListComponent}, {path: '/inbox/detail/:id',component: InboxMessageDetailComponent} ]) ], exports: [RouterModule] })
app.component.ts
template : '<router-outlet></router-outlet>'<!--This route-outlet will load "LoginComponent/InboxComponent" depending upon the routing. -->
inbox-message.component.ts
template:` <sidebar-component></sidebar-component> <router-outlet></router-outlet> <!-- This will load InboxMessageListComponent or InboxMessageDetailComponent --> `
But the problem is only one is working at a time. The second one is skipping.
How to Route this kind of project ?
-
Bimal Das over 7 yearsok, but in my case , I have two routers in two different components named "app.component.ts","inbox-message.component.ts" . Will both the routers work according to route ?
-
Tito over 7 yearsI cant share it its private sorry, but you can use them both, use them separate and will be ok I think.