CSS3艺术:网页设计案例实战之angular实现 四、实现头部和底部的导航

一、修改第一章介绍的html

修改后的文件(src\app\chapter01\chapter01-introduce\chapter01-introduce.component.html)如下:

<p>1、本章将回顾CSS中重要的基本概念。</p>

<p>2、本章提供了29个示例。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<small>它们充分展现了CSS丰富的表现力，只用寥寥几行CSS代码就能描绘出杨辉三角形、象棋棋盘、素数集合等。</small></p>

<p>3、读完本章，就会发现用CSS创作艺术作品是一种快乐的体验。</p>

二、修改第一章第一节的html

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

<h2>1.1 CSS简介</h2>
<p>&nbsp;&nbsp;&nbsp;&nbsp;CSS全称是“Cascading Style Sheets”，中文译为“层叠样式表”，不过一般不用这样的官名称呼它，提到它时只简称为“CSS”或“样式表”。CSS代码和HTML代码（本书也经常称它为DOM结构）一起配合，构建出网页的外观。打个比方，HTML就像是人的骨骼，而CSS则像是人的皮肤和肌肉，骨骼定义了身体的结构，而皮肤和肌肉塑造了我们的外貌，当网页的DOM结构确定下来之后，我们就可以通过书写CSS来灵活地配置网页的外观了。如果给你和你的同学相同的DOM结构，但CSS代码由你们分别来写，最后的网页一定会长得不一样，就好像你和你的同学都有206块骨头，但你们的肤色、高矮、胖瘦不同，所以没有人会说你们是同一个人。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;最初的网页是没有CSS的，就像最初的房子不用装修一样，看起来相当简陋。1996年CSS 1.0横空出世，提供了文本、颜色等功能，1998年推出的2.0版本和随后推出的2.1修正版本，支持了定位、盒模型等功能，2001年开始制定3.0规范，支持动画、变形等丰富的视觉效果。如此看来，CSS3已经有十几年的历史了，不算是什么新技术，事实是尽管标准制定得相当快，但因为在浏览器大战期间各浏览器厂商并不尊重公开标准，对CSS 2.1的支持都不统一，更别说CSS3了，这导致CSS 3直到10年之后才真正得到广泛支持。因为CSS支持的功能越来越多，所以从3.0开始，规范被分解为若干个独立的小模块，例如文本、颜色、定位等都是单独的小模块，便于各模块分别发展，就像一个单细胞生物进化成了多细胞生物，各个模块之间相互分工和依赖，提供了更强大的生命力，本书内容主要涉及伪元素、背景和边框、滤镜、缓动、变形、动画等模块。</p>

<p class="bg-danger text-blue">特别说明：此处作者总结的太棒，我为做任何删改。</p>

三、修改根组件的ts

1、定义导航变量

为底部导航的左边(上一个)和右边(下一个)的导航，定义四个变量

/** 前一个章*/
  public previousChapter: Chapter = this.emptyChapter;
  /**前一个小节 */
  public previousSection: Section = this.emptySection;
  /** 下一个章 */
  public nextChapter: Chapter = this.emptyChapter;
  /** 下一个小节  */
  public nextSection: Section = this.emptySection;

2、在构造函数中设置初始值

constructor(private dataSource: StaticDataSource,
    private router: Router) {
    this.dataSource.getChapters().subscribe(data => {
      this.chapters = data;
      if (this.chapters.length > 0) {
        this.selectedChapter = this.chapters[0];
        /** 下一个章 */
        this.nextChapter = this.selectedChapter;
        /** 下一个小节  */
        this.nextSection = this.nextChapter.sections[0];
      }
    });
  }

3、增加导航处理初始化的私有方法

/** 导航处理初始化 */
  private navLinkHandleInit(chapter: Chapter) {
    let tempChapter = this.chapters.find(p => p.id == chapter.id);
    this.selectedChapter = this.emptyChapter;
    if (tempChapter) {
      this.selectedChapter = tempChapter;
    }

    this.previousChapter = this.emptyChapter; //上一个节点的章
    this.previousSection = this.emptySection; //上一个节点的小节
    this.nextChapter = this.emptyChapter; //下一个节点的章
    this.nextSection = this.emptySection;
  }

4、增加选中小节的底部导航参数值设置的私有方法

/** 选中小节的底部导航参数值设置 */
  private navSectionHandle() {
    /** 选中章所在数组的序号 */
    let chapterIndex = this.chapters.indexOf(this.selectedChapter);
    let sectionIndex = this.selectedChapter.sections.indexOf(this.selectedSection);
    if (sectionIndex == 0 || sectionIndex == -1) {
      //第一个小节
      this.previousChapter = this.selec