如何在主要路線中加載新路線

目前我是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>但我不希望導航菜單出現時，我訪問/產品換句話說，我希望我的路線應加載在父路由沒有子路由。任何幫助，將不勝感激！

來源

2017-09-02 Mohammad Hani

你應該定義在appRoutes你的孩子不斷模塊，因爲這：

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

來源

2017-09-02 08:59:27

我會試試這個，謝謝！ –

查看更多：https://angular.io/guide/router#child-routing-component –

鹿先生的答案是懶加載正確的 - 但是，你不要總想做到這一點。如果你只想有子組件，你應該做的：

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

也就是說，延遲加載通常是優選的。

來源

2017-09-02 09:46:20 yusijs

如何在主要路線中加載新路線

回答

相關問題