CSS3艺术:网页设计案例实战之angular实现 三、第1章 实现路由

目录

一、建立chapter01模块

二、建立第一章所需组件

三、实现第一章的路由

1、修改chapter01模块

2、修改根模块

3、修改根路由

4、修改根组件的html

四、导航与路由关联

1、修改Chapter类，增加链接字段

2、修改数据源

3、修改根组件的ts，注入路由以及增加导航函数

4、修改根组件的html,导航关联路由

---

一、建立chapter01模块

ng g m chapter01

angular/cli建立文件src\app\chapter1\chapter01.module.ts

注：1、各个章节，独立一个模块。

2、各个章节，在一个文件夹里面，方便查找。

二、建立第一章所需组件

1、介绍

ng g c chapter01/chapter01Introduce -m chapter01

2、各个小结
ng g c chapter01/chapter0101 -m chapter01
ng g c chapter01/chapter0102 -m chapter01
ng g c chapter01/chapter0103 -m chapter01
ng g c chapter01/chapter0104 -m chapter01
ng g c chapter01/chapter0105 -m chapter01
ng g c chapter01/chapter0106 -m chapter01
ng g c chapter01/chapter0107 -m chapter01
ng g c chapter01/chapter0108 -m chapter01
ng g c chapter01/chapter0109 -m chapter01
ng g c chapter01/chapter0110 -m chapter01

三、实现第一章的路由

1、修改chapter01模块

    定义子路由、导出它包括的组件，修改后的文件(src\app\chapter01\chapter01.module.ts)如下

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Chapter01IntroduceComponent } from './chapter01-introduce/chapter01-introduce.component';
import { Chapter0101Component } from './chapter0101/chapter0101.component';
import { Chapter0102Component } from './chapter0102/chapter0102.component';
import { Chapter0103Component } from './chapter0103/chapter0103.component';
import { Chapter0104Component } from './chapter0104/chapter0104.component';
import { Chapter0105Component } from './chapter0105/chapter0105.component';
import { Chapter0106Component } from './chapter0106/chapter0106.component';
import { Chapter0107Component } from './chapter0107/chapter0107.component';
import { Chapter0108Component } from './chapter0108/chapter0108.component';
import { Chapter0109Component } from './chapter0109/chapter0109.component';
import { Chapter0110Component } from './chapter0110/chapter0110.component';
import { RouterModule } from '@angular/router';

let routing = RouterModule.forChild([
  { path: "introduce", component: Chapter01IntroduceComponent},
  { path: "01", component: Chapter0101Component},
  { path: "02", component: Chapter0102Component},
  { path: "03", component: Chapter0103Component},
  { path: "04", component: Chapter0104Component},
  { path: "05", component: Chapter0105Component},
  { path: "06", component: Chapter0106Component},
  { path: "07", component: Chapter0107Component},
  { path: "08", component: Chapter0108Component},
  { path: "09", component: Chapter0109Component},
  { path: "10", component: Chapter0110Component}, 
  { path: "**", redirectTo: "introduce" }
]);

@NgModule({
  declar