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>

现在，当我服务我的服务器时一切顺利，除了我/产品和/家庭路线已加载到<router-outlet></router-outlet>但我不希望导航菜单出现在我访问/产品换句话说我想要那个我的路线应该在父路线中加载没有子路由。任何帮助，将不胜感激！

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

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

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

2 个答案: