Angular学习笔记：数据传值和管道

本文是自己的学习笔记，主要参考资料如下。

- B站《2020最新Angular实战教程》，老陈打码制作，https://www.bilibili.com/video/BV1i741157Fj?p=2。

---

1、传递输入值

1.1、引入包

数据绑定就是将页面的输入变成代码中的一个变量，让程序可以操控查看这个变量。

在使用数据绑定前要先引入下面的包。

1.2、传递输入值

我们可以使用[(ngModel)]当做元素的一个属性来创建对应的变量。

比如说获取用户输入的账号。

<input type="text" [(ngModel)]="username"></input>

这时候整个html页面就有一个名为username的变量，里面存储着输入框输入的值，并且是实时跟着输入变化的。我们就可以在其他地方直接使用这个变量。

<button (click)="getUsername(username)"></button>

1.3、传递dom元素

和[(ngModel)]类似，我们可以将整个dom元素当成变量来操控。下面是例子

<input #input1 type="text"></input>

现在，整个input元素被命名为input1，可以直接使用。

<button (click)="getElement(input1)"></button>

2、传递事件对象

2.1、什么是事件对象

用来描述页面的click，doubleClick等事件的对象就是事件对象。该对象包含了本次事件的类型，触发的元素，元素的坐标等信息，下面的截图是部分信息。

2.2、传递事件对象

在click等函数中，可以将本次事件当成参数传递，使用方式很简单，只要在参数后面加上$event即可。

<button (click)="getElement(input1, $event)">button</button>

ts的代码如下

getElement(input1, event) {
    console.log(input1);
    console.log(event);
}

3、管道

管道其实就是页面的一个过滤器，方面我们在页面简单地对数据进行简单地处理，比如对象转成JSON，小写变大写。

3.1、常用管道

在html页面这样使用，下面是常用的管道

<h1>{{username | uppercase}}</h1>
<h1>{{username | lowercase}}</h1>
<h1>{{object | json}}</h1>
<h1>{{date | date:"MM/dd/yy"}}</h1>

管道还可以一次使用多个，按照从左到右的顺序生效。

<h1>{{username | uppercase | lowercase}}</h1>

3.2、自定义管道

3.2.1、生成管道文件

使用ng g pipe filter/customizedPipe，在filter目录下生成管道文件自动生成管道文件。正常来说，管道文件的默认内容如下

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

@Pipe({
  name: 'customizedPipe'
})
export class CustomizedPipePipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

因为是使用指令生成的管道，所以该自定义管道已经被自动引入到app.module.ts

3.2.2、实现transform方法

所需要做的就是实现其中的transform方法。 transform中有两个参数，一个是value，是要被转换的对象。另一个是其他参数，使用管道时可多传一些参数，比如下面这条语句。

{{title | customizedPipe:'圆'}}

其中的圆就会被当成参数传进来。

举一个例子，我们来实现一个显示货币的管道。其他的代码省略，就只展示如何实现transform方法

transform(value, ...args){
    return '$' + value + args[0];
}

假设ts已经定义了一个balance变量，html的代码就可以写成

{{balance | customizedPipe:'圆'}}

最后效果如下