Angular7.2.7路由使用初體驗

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const route: Routes = [
{path: 'browse-product', component: BrowseProductComponent},
{path: 'buy-product', component: BuyProductComponent}
]

@NgModule({
imports: [RouterModule.ferChild(route)], // 子路由使用ferChild方法
exports: [RouterModule]
})

export class ChildRoutingModule {}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const route: Route = [
{
 path: '',
 children: [
 {path: '', redirectTo: '/user/browse-product', pathMatch: 'full'},
 {path: 'user', loadChildren: './user/user.module#UserModule'},
 {path: 'admin', loadChildren: './admin/admin.module#AdminModule'},
 ]
 }
]

@NgModule({
imports: [RouterModule.forRoot(root, {useHash: false})],
exports: [RouterModule]
})

export class ParentRoutingModule {}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentRoutingModule } from 'parentRoutingModule';
@NgModule({
declarations: [
 AppComponent,
 ],
 imports: [
 BrowserModule,
 RouterModule,
 ParentRoutingModule
 ]
})

<h1>Angular Router</h1>
<nav>
 <a routerLink="/user/browse-product">browse-product</a>  
 <a routerLink="/user/buy-product">buy-product</a> 
 <a routerLink="/admin/manage-product">manage-product</a> 
 <a routerLink="/admin/operator-record">operator-record</a> 
</nav>
<router-outlet></router-outlet>