Comment charger un nouvel itinéraire dans l'itinéraire principal

Question

Actuellement, je suis nouveau à Angular. J'apprenais le sujet de routage mais semble coincé à un point où je veux charger la nouvelle route dans l'itinéraire principal. Mon app.module ressemble

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 
import {HttpModule} from '@angular/http'; 
import {RouterModule, Routes} from '@angular/router'; 
// COMPONENTS 
import {AppProduct} from './product.compnent'; 
import {AppFamily} from './family.component'; 

const appRoutes: Routes = [ 
    {path: 'Family', component: AppFamily}, 
    {path: 'Product', component: AppProduct} 
] 
@NgModule({ 
    imports:  [ BrowserModule, HttpModule, RouterModule.forRoot(appRoutes)], 
    declarations: [ AppComponent, AppFamily, AppProduct], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.component

import { Component } from '@angular/core'; 
import {IProducts} from './IProduct'; 
import {ProductService} from './products.service' 
// FAMILY IMPORTS 
import {IFamily} from './IFamily' 
import {familyService} from './family.service' 
@Component({ 
    selector: 'hello-world-app', 
    templateUrl: "app/app.component.html", 
    providers: [ProductService, familyService] 
}) 
export class AppComponent { 
    iproducts: IProducts[]; 
    familyMembers: IFamily[]; 
    constructor(
    private _product: ProductService, 
    private _family: familyService){ 
    } 
    ngOnInit():void{ 
    this._family.getAllFamilyMembers() 
    .subscribe(_successLog => { 
     this.familyMembers = _successLog; 
    }) 
    } 
} 

app.component.html

<ul> 
    <li> 
     <a [routerLink]="['/Product']"> 
      Product 
     </a> 
    </li> 
    <li> 
     <a [routerLink]="['/Family']"> 
      Family 
     </a> 
    </li> 
</ul> 
<router-outlet> 
</router-outlet> 

Maintenant, quand je sers mon serveur tout va bien, sauf pour mon/produit et/Route familiale est chargé dans <router-outlet></router-outlet> mais je ne veux pas que le menu de navigation apparaisse lorsque je visite/Produit en d'autres termes Je veux que mon itinéraire devrait charger dans la route parente aucun routage d'enfant. Toute aide serait appréciée!

Answer 1

Vous devez définir vos enfants module dans votre appRoutes constante ceci:

{ path: '/childPath', 
component: ChildComponent, 
children: [ 
    {path: 'about', 
    loadChildren: './path/to/children.module#ModuleName'} 
    ] 
} 

Answer 2

La réponse de M. Deer, est correcte pour le chargement paresseux - cependant, vous ne voulez pas toujours le faire. Si vous voulez avoir juste des composants de l'enfant, vous devez faire:

{ path: '/childPath', 
component: ChildComponent, 
children: [ 
    {path: 'about', 
    component: SecondChildComponent 
    ] 
} 

Cela dit, le chargement paresseux est généralement préféré.