Using router-outlet in Angular 2

5
votes

Below pseudo code describes my component tree structure.

<app-root>  

<router-outlet name="main"> 

     <Home-component>       

        <a routerLink="about">About</a> //
        <router-outlet name="home"> </<router-outlet>

     </Home-component>

</router-outlet>

</app-root>

When user clicks "About" link , the About Component is displayed in "main" route-outlet , but my intention is to display it in "home" router-outlet, what needs to be modified to achieve that.

"app-root" component and "Home-component" are part of root module and "AboutComponent" is part of a feature module.

Root Module routing is as below..

RouterModule.forRoot([
    {path:'' , component:LoginComponent },
    {path:'home' , component:HomeComponent}
  ]),

and Feature module routing is as below...

RouterModule.forChild([
    {path:'about' , component:AboutComponent }
])
3
htmlangulartypescript
You need to configure about routes as child of home route. – ranakrunal9
First configure routes, then try <a [routerLink]="['/about', { outlets: {'home':['about'] }}]"></a> – Rajesh Dan
See this answer : http://stackoverflow.com/a/40477582/7045253 – KarateJB

3 Answers

3
votes

follow this pattern for your routes.

 export const routes: Route[] = [{
        path: '',
        redirectTo: "login",
        pathMatch: "full"
    }, 
    {
        path: 'login',
        component: LoginComponent
    }, 
    {
        path: 'csvtemplate',
        component: TemplateComponent,
        canActivate: ['canActivateForLoggedIn'],
        children: [{
            path: '',
            redirectTo: 'dashboard'
        }, 
        {
            path:'dashboard',
            component: DashboardComponent
        },
        {
            path: 'csvtimeline',
            component: CsvTimelineComponent
        }, {
            path: 'addcategory',
            component: CsvAddCategoryComponent
        }
        ]
    }];
1
votes

1: Don't nest content between < router-outlet> & < /router-outlet> "router-outlet" is kind of an i-frame in functionality. It makes no sense putting content there, and have seen zero tutorials that do so.

2: If you have: < router-outlet name="MAIN_OUTLET_ID" >

Then you need something like this in app.module.ts

const appRoutes: Routes=[
 {path: 'main', outlet:MAIN_OUTLET_ID, component:MainComponent},
 /// ... more routes here ... ///
]

@NgModule({
...
imports: [
    RouterModule.forChild([ appRoutes ]),
    /// ... other imports here ... ///
],
...
})

NOTES:

1: I use "MAIN_OUTLET_ID" in my example because it disambiguate the path from the id of the router-outlet.

0
votes
<router-outlet name="home"> 
  <a routerLink="about">About</a>
</<router-outlet>

you can try this way.your 'about' should be included in home.