Как загрузить новый маршрут в основной маршрут

Question

В настоящее время я новичок в Angular. Я изучал тему маршрутизации, но, похоже, застрял в точке, где я хочу загрузить новый маршрут в основной маршрут. Мой app.module выглядит так

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>

Теперь, когда я обслуживаю свой сервер, все идет хорошо, за исключением того, что мой /Product и /Family маршрут загружен в <router-outlet></router-outlet> но я не хочу, чтобы при переходе в /Product появлялось меню навигации, другими словами, я хочу, чтобы мой маршрут загружался по родительскому маршруту без дочерней маршрутизации. Любая помощь будет оценена!

Answer 1

Вы должны определить свой дочерний модуль в константе appRoutes следующим образом:

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

Answer 2

Ответ мистера Дира является правильным для ленивой загрузки - однако, вы не всегда хотите это делать. Если вы хотите просто иметь дочерние компоненты, вы должны сделать:

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

Тем не менее, ленивая загрузка, как правило, предпочтительнее.