Angular学习笔记(3) 部分内置指令介绍

我自己看 Angular，也是有一定选择的，涉及到样式的部分，本人能力有限，学得会，用不好，所以这部分，我自己也不会深入学习。不管是指令还是其他模块，其实都会有一部分跟样式相关的知识，这部分，大家可以系统参考其他资料。
其实样式，我自己感觉也不是必须学习，跟 Angular 相匹配的前端框架，比如 阿里云 开源的 ng-zorro-antd，其实已经把样式做得很舒服了，专业的东西交给专业的人士去做，自己做自己可以做的。
闲话不多说，这里介绍ngIf，ngSwitch，ngFor和管道的相关内容。

1. ngIf

通过条件判断来确定显示哪个标签，可以使用 ngIf 语句，ngIf 的值可以是一个表示条件判断的表达式，例如：

<div *ngIf="false"></div>
<div *ngIf="a > b"></div>
<div *ngIf="str = 'yes'"></div>
<div *ngIf="check()"></div>

举例，沿用前面两部分的用例，修改 app.component.html 的内容如下：

<div *ngIf="2 > 1">2 is bigger than 1</div>
<div *ngIf="1 > 2">1 is bigger than 2</div>
<div *ngIf="title == 'angular-frontend'">{{title}}</div>

很明显，可以打印出来 第1个 和 第3个 div 标签元素。

2. ngSwitch

很明显，涉及到的是一个变量的值比较多，类似于 java 中的 switch 语句，用法也很简单，首先，我们在 app.component.ts 中，设置一个成员变量 color，类型为 string 类型，在 构造函数中，将值默认设置为 ‘’，然后添加 setColor 方法：

  setColor(color: string): void {
    this.color = color;
  }

我们在 app.component.html 中，代码如下：

<div><button (click)="setColor('red')">红色</button></div>
<div><button (click)="setColor('yellow')">黄色</button></div>
<div><button (click)="setColor('black')">黑色</button></div>
<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">你选择了红色</div>
  <div *ngSwitchCase="'yellow'">你选择了黄色</div>
  <div *ngSwitchCase="'black'">你选择了黑色</div>
  <div *ngSwitchDefault>你还没有选择颜色</div>
</div>

在上面，定义了三个按钮，通过点击按钮，设置颜色(Component 中 color 成员变量的值)的值。最终反映在页面上。
页面的下面部分，定义了一个 ngSwitch，[ngSwitch] 表示输入，值为变量 color 的值，然后下面定义了三个 ngSwitchCase 对类型进行遍历，而且还可以定义 ngSwitchDefault 定义默认值，如果熟悉java、c/c++ 任何一种语言，对这个语法结构应该很好理解。

3. ngFor

重复渲染一个或者一组给定的DOM元素，例如将数组或者List的元素，循环输出到列表或者表格中。
一般的语法结构为：

<div *ngFor="let item of items"></div>

items 就是Component传过来的数组或者List，let item of items 是符合 TypeScript 语法的遍历语句。
举例：
app.component.ts 内容：

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

class Person {
  constructor(
    public id: number,
    public name: string,
    public age: number
  ) {}
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-frontend';
  persons: Person[];

  constructor() {
    this.persons = [
      new Person(1, 'zhang san', 25),
      new Person(2, 'li si', 28),
      new Person(3, 'wang wu', 26),
      new Person(4, 'zhao liu', 23),
    ];
  }
}

app.component.html 内容：

<table border="1px">
  <thead>
    <tr>
      <th>index</th>
      <th>id</th>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tr *ngFor="let person of persons, let num = index">
    <td>{{num}}</td>
    <td>{{person.id}}</td>
    <td>{{person.name}}</td>
    <td>{{person.age}}</td>
  </tr>
</table>

作用是将Person数组的内容，渲染到表格中。
同时，上例也展示了如何获取列表的序号，就是同时设置 let num = index，此时 num 就是序号。

4. 管道

4.1 引例及管道概念

先看两个例子：
在 app.component.ts 中，定义了两个成员变量：

  title = 'Angular-Frontend';
  date = new Date();

在 app.component.html 中，有如下的代码：

<div>title: {{title}}</div>
<div>upper case of title: {{title | uppercase}}</div>
<div>lower case of title: {{title | lowercase}}</div>

<div>date: {{date}}</div>
<div>formatted date: {{date | date:'yyyy-MM-dd HH:mm:ss'}}</div>

我们运行程序，在页面中，展示的内容如下：

我们可以看到，输出的内容格式变化了，上面可以输出字符串的大写和小写格式，下面可以修改时间的输出格式。
管道把数据作为输入，然后转换它，给出期望的输出。可以有好的将“显示–值”转换器 声明在HTML中，管道的表达式： {{ 显示 | 格式 }}。
在上面的列子中，就用到了 DatePipe、UpperCasePipe、LowerCasePipe 等输出格式。

4.2 自定义管道

这一步，我们通过一个例子，介绍如何自定义管道。首先介绍一下应用场景，如前面的 ngFor 的例子，我们打印了一个 Person[] 的信息，但是如果我们直接如下打印，会是什么结果呢？

<ul *ngFor="let person of persons">
  <li>{{person}}</li>
</ul>

很明显，不能看：

此时，我们希望自己定制一个管道，来实现有意义的输出。
首先，定义管道的命令为：

ng generate pipe [pipe-name]

执行上面命令后，会在执行命令的目录下面生成两个文件，[pipe-name].pipe.ts 和 [pipe-name].pipe.spec.ts，照例，后面的是用来测试的，我们不管，咱们只管前面的。
这里，我们希望对 Person 对象进行序列化，因此我们执行命令如下：

然后，我们更新 serialization-person.pipe.ts，内容如下：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'serializationPerson'
})
export class SerializationPersonPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    return JSON.stringify(value);
  }

}

我们直接输出 JSON 格式的对象，然后在 app.module.ts 中，在 providers 中，配置我们创建的管道：

然后修改app.component.html如下：

<ul *ngFor="let person of persons">
  <li>{{person | serializationPerson}}</li>
</ul>

此时，我们就可以输出有意义的内容了：

5. 说明

在上面介绍的 ngIf、ngFor 和 ngSwitch，都是可以嵌套使用的，比如 ngFor 内部可以嵌套 ngFor 使用。