11

I have a messaging project in angular 2. angular 2 routing image

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 ?

2

2 Answers 2

7

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"
2
  • ok, 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 ?
    – Bimal Das
    Nov 4, 2016 at 8:17
  • I cant share it its private sorry, but you can use them both, use them separate and will be ok I think.
    – Tito
    Nov 4, 2016 at 9:25
0

I assume that inbox is a module of the app application. In this case you should also import the inbox module in module app as follow:

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'login', component: LoginComponent},
            { path: 'inbox', component: InboxMessageComponent },
            { path: '', component: InboxMessageComponent },
            { path: '**', component: NotFoundComponent }
        ]),
        MyInboxModule
    ],
    exports: [RouterModule]
})

See also the link Routing and Natigation in Angular2: https://angular.io/docs/ts/latest/guide/router.html

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.