Using router output in Angular 2

Question

The pseudo-code below describes the tree structure of my component.

<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 the user clicks the "About the program" link, the "About the component" component is displayed in the "main" route-exit, but I intend to display it in the "home" router-exit, which needs to be changed to achieve this.

The app-root and Home-component are part of the root module, and the AboutComponent is part of the function module.

Root module routing is described below.

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

and the module routing function is described below ...

RouterModule.forChild([
    {path:'about' , component:AboutComponent }
])

Answer 1

.

 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
        }
        ]
    }];

Answer 2

1: < - > /-a > "-" - i-frame. , , .

2: : < router-outlet name= "MAIN_OUTLET_ID" >

- 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 ... ///
],
...
})

:

1: "MAIN_OUTLET_ID" , .

Answer 3

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

. "" .