Angular--路由的嵌套(父子路由)

1. Angular–路由的嵌套(父子路由)

---

1.1 准备工作

1.1.1 创建项目

ng new angularDemo

---

1.1.2 创建组件

---

1.2 Angular–路由的嵌套(父子路由)

1.2.1 引入路由&配置路由

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


import { HomeComponent } from './components/home/home.component';
    import { WelcomeComponent } from './components/home/welcome/welcome.component';
    import { SettingComponent } from './components/home/setting/setting.component';

import { ProductComponent } from './components/product/product.component';
    import { PcateComponent } from './components/product/pcate/pcate.component';
    import { PlistComponent } from './components/product/plist/plist.component';

import { NewsComponent } from './components/news/news.component';



const routes: Routes = [

  {
    
      path:'home',component:HomeComponent,

      children:[

        {path:'welcome',component:WelcomeComponent},

        {path:'setting',component:SettingComponent},

        {path:'**',redirectTo:'welcome'}
      ]


   },
  {
    
    path:'product',component:ProductComponent,
    children:[

      {path:'plist',component:PlistComponent},

      {path:'pcate',component:PcateComponent},

      {path:'**',redirectTo:'plist'}
    ]


  },

  {path:'news',component:NewsComponent},
  {path:'**',redirectTo:'home'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

1.2.2 父组件中定义 router-outlet

home.component.html

<div class="content">
  <div class="left">
      <a [routerLink]="[ '/home/welcome']" routerLinkActive="active">欢迎首页</a>
      <br>
      <br>
      <a [routerLink]="[ '/home/setting']" routerLinkActive="active">系统设置</a>
  </div>
  <div class="right">
    <router-outlet></router-outlet>
  </div>
</div>

product.component.html

<div class="content">
  <div class="left">
    <a [routerLink]="[ '/product/pcate']" routerLinkActive="active">商品分类</a>
    <br>
    <br>
    <a [routerLink]="[ '/product/plist']" routerLinkActive="active">商品列表</a>
  </div>
  <div class="right">
    <router-outlet></router-outlet>
  </div>
</div>

1.2.3 演示

---

---