如何在主路由中加载新路由

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

Deer 先生的答案对于延迟加载是正确的 - 但是，您并不总是想这样做。如果你只想拥有子组件，你应该这样做：

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

也就是说，延迟加载通常是首选。

如何在主路由中加载新路由

How to load new route in main route

javascript

angular2-routing

angular2-modules

angular