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

目前我是个新手。我正在学习路由主题，但似乎停留在一个点，我想加载新的路线在主路线。我的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 { }

应用程序组件

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路由加载在

中之外，其他一切都正常，但我不希望在访问/Product时出现导航菜单，换句话说，我希望我的路由加载在父路由中，而不是子路由。

---

任何帮助都将不胜感激

您应该在appRoutes常量中定义子模块，如下所示：

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

---

您应该在appRoutes常量中定义子模块，如下所示：

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

---

Deer先生的答案对于延迟加载是正确的——但是，您并不总是希望这样做。如果只希望有子组件，则应执行以下操作：

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

---

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

对于延迟加载，Deer先生的回答是正确的，但是，您并不总是希望这样做。如果只希望有子组件，则应执行以下操作：

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

---

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

我会试试这个，谢谢！我会试试这个，谢谢！