Angular5学习笔记（二）- 路由

在了解了demo的应用启动过程之后，继续学习Angular5的路由使用。

在这个demo中，最显而易见的路由切换就是 Home 和 Heroes List，这两个button在页面上方NAV中。

 

从HTML页面代码可以看出，这两个button是通过遍历得到的，这里的路由切换用的是routerLink。

 

    
        {{item.name | uppercase}}
    

而在nav.component.ts里要声明页面遍历的数组menuItems。

this.menuItems = [
  {link: '/', name: 'home'},
  {link: '/' + AppConfig.routes.heroes, name: 'heroes list'}
];

这里的 AppConfig.routes.heroes是浏览器地址栏的路由名称。

下面是app.config.ts的部分代码

export const AppConfig: IAppConfig = {
  routes: {
    heroes: 'heroes',
    error404: '404'
  } 
};

前面是路由的切换调用，那么很明显的一个问题就是在调用之前要有一个定义声明的过程。

app-routing.module.ts:

const routes: Routes = [
  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: '', component: HeroTopComponent},
  {path: AppConfig.routes.heroes, loadChildren: 'app/heroes/heroes.module#HeroesModule'},
  {path: AppConfig.routes.error404, component: Error404Component},

  // otherwise redirect to 404
  {path: '**', redirectTo: '/' + AppConfig.routes.error404}
];

在这里可以看到路由部分定义了path，以及path所对应的Component。heroeslist这部分用了一个单独封装好的Module，今天先不看这个，后续还会继续学习loadChildren这部分。

这几个页面路由当中，path对应其Component比较典型的就是error404了，在其Component里面指定其HTML页面和样式表文件。

下面是error-404.components.ts代码：

import {Component} from '@angular/core';

@Component({
  selector: 'app-error-404',
  templateUrl: './error-404.component.html',
  styleUrls: ['./error-404.component.scss']
})

export class Error404Component {
  constructor() {
  }
}

路由的使用已经了解了，最后总结一下在路由的使用过程中包括的知识点：

1.      *ngFor：这里的遍历使用了*ngFor而不是ngFor。 需要说明的是：*是不能够去掉的； 如果去掉的话那么我们的程序不会报错，但是我们只循环出来了数组的第一项。

当然我们也可以在*ngFor表达式的后面写一些能够帮助我们展示每一项索引的操作，可以像下面这样：

{{i}}-{{fruit}}

需要注意的是，首先要知道*ngFor后面跟的是表达式,所以我们可以写一些简单的表达式,帮助我们更好地进行循环；还有我们使用了let关键词,增加了块级作用域，使我们的这些变量都限定在*ngFor这个循环块中。

2.    uppercase：{{item.name| uppercase}} 会把当前遍历条目的name字母转大写。

这里的用法是Angular内建的过滤器，AngularJS为我们提供了9个内建的过滤器，分别是currency, date,filter, json, limitTo, uppercase， lowercase, number, orderBy。具体的用法参看AngularJS的文档：https://docs.angularjs.org/api/ng/filter

 明天将继续学习多语言的配置和使用。