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({
  declarations: [
    Chapter01IntroduceComponent,
    Chapter0101Component,
    Chapter0102Component,
    Chapter0103Component,
    Chapter0104Component,
    Chapter0105Component,
    Chapter0106Component,
    Chapter0107Component,
    Chapter0108Component,
    Chapter0109Component,
    Chapter0110Component
  ],
  imports: [
    routing, CommonModule
  ],
  exports:[
    Chapter01IntroduceComponent,
    Chapter0101Component,
    Chapter0102Component,
    Chapter0103Component,
    Chapter0104Component,
    Chapter0105Component,
    Chapter0106Component,
    Chapter0107Component,
    Chapter0108Component,
    Chapter0109Component,
    Chapter0110Component
  ]
})
export class Chapter01Module { }

2、修改根模块

导入chapter01模块,修改后的文件(src\app\app.module.ts)如下

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Chapter01Module } from './chapter01/chapter01.module';
import { ModelModule } from './model/model.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ModelModule,
    Chapter01Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3、修改根路由

定义根路由，动态加载第一章模块，修改后的文件(src\app\app-routing.module.ts)如下

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

const routes: Routes = [
  {
    path:"chapter01",
    loadChildren:()=>import("./chapter01/chapter01.module")
      .then(m=>m.Chapter01Module)
  },
  { path: "**", redirectTo: "/chapter01" }
];

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

4、修改根组件的html

在路由占坑位置写入<router-outlet></router-outlet>,修改后的文件(src\app\app.component.html)如下

  <div class="container-fluid">
    <div class="row bg-light main">
      <div class="col-3 d-flex flex-column p-3 scrollable">
        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
          <span class="fs-6">CSS3艺术:网页设计案例实战</span>
        </a>
        <ul class="list-unstyled ps-0">
          <li class="mb-1" *ngFor="let chapter of chapters;let i=index">
            <a class="btn btn-toggle" data-bs-toggle="collapse"
              href="#chapter{{chapter.id}}-collapse" aria-expanded="false">
              {{chapter.title}}
            </a>
            <div class="collapse" id="chapter{{chapter.id}}-collapse">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li *ngFor="let section of chapter.sections">
                  <a href="#" class="link-dark rounded">{{section.title}}</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-9 card">
        <div class="card-header">头部</div>
        <div class="card-body">
          <router-outlet></router-outlet>
        </div>
        <div class="card-footer">底部</div>
      </div>
    </div>
  </div>

至此，第一章各个章节的占位以及路由实现。

四、导航与路由关联

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

修改后文件(src\app\model\chapter.model.ts)如下

import { Section } from "./section.model";

export class Chapter {
    constructor(
        public id: number,
        public title: string,
        public link: string,
        public sections:Section[]
    ){}
}

2、修改数据源

2.1、章的构造数据增加链接字段。

2.2、小结的数据，写入链接字段的值。

修改之后文件(static.data.source.ts)如下

import { Injectable } from "@angular/core";
import { from, Observable } from "rxjs";
import { Chapter } from "./chapter.model";
import { Section } from "./section.model";

@Injectable()
export class StaticDataSource {
    private chapters:Chapter[]=[
        new Chapter(1,"第1章 CSS基础知识","chapter01/introduce",[
            new Section(1,"1.1 CSS简介","chapter01/01"),
            new Section(2,"1.2 在页面中应用CSS","chapter01/02"),
            new Section(3,"1.3 常用CSS属性一览","chapter01/03"),
            new Section(4,"1.4 选择器","chapter01/04"),
            new Section(5,"1.5 单位","chapter01/05"),
            new Section(6,"1.6 盒模型","chapter01/06"),
            new Section(7,"1.7 定位","chapter01/07"),
            new Section(8,"1.8 布局","chapter01/08"),
            new Section(9,"1.9 重叠","chapter01/09"),
            new Section(10,"1.10 继承和引用","chapter01/10")
        ]),
        new Chapter(2,"第2章 伪元素","",[
            new Section(1,"2.1 ::before和::after伪元素",""),
            new Section(2,"2.2 content属性",""),
            new Section(3,"2.3 灵活使用伪元素",""),
            new Section(4,"2.4 项目应用","")
        ]),
       ......
}

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

修改之后的文件(src\app\app.component.ts)如下

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Chapter } from './model/chapter.model';
import { StaticDataSource } from './model/static.data.source';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public chapters: Chapter[] = [];
  constructor(private dataSource: StaticDataSource,
     private router: Router) {
    this.dataSource.getChapters().subscribe(data => {
      this.chapters = data;
      console.log(this.chapters);
    })
  }

  navLinkClick(link:string){
    this.router.navigateByUrl(link);
  }
}

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

4.1、<a>元素通过routerLink属性的绑定，可以实现路由关联。

4.2、bootstrap的.collapse组件的枝干中的<a>元素的href被占用，故不能用routerLink属性绑定，只有通过点击事件用代码实现导航。

修改之后的文件(src\app\app.component.html)如下

  <div class="container-fluid">
    <div class="row bg-light main">
      <div class="col-3 d-flex flex-column p-3 scrollable">
        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
          <span class="fs-6">CSS3艺术:网页设计案例实战</span>
        </a>
        <ul class="list-unstyled ps-0">
          <li class="mb-1" *ngFor="let chapter of chapters;let i=index">
            <a class="btn btn-toggle" data-bs-toggle="collapse"
              href="#chapter{{chapter.id}}-collapse" aria-expanded="false" (click)="navLinkClick(chapter.link)">
              {{chapter.title}}
            </a>
            <div class="collapse" id="chapter{{chapter.id}}-collapse">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li *ngFor="let section of chapter.sections">
                  <a class="link-dark rounded" [routerLink]="section.link">{{section.title}}</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-9 card">
        <div class="card-header">头部</div>
        <div class="card-body">
          <router-outlet></router-outlet>
        </div>
        <div class="card-footer">底部</div>
      </div>
    </div>
  </div>