Angular的管道
<p>Angular的管道可以看作成是一个数据格式化展示的工具。管道可以将数据格式化显示，而不改变源数据。获取数据可能简单到创建一个局部变量就行，也可能复杂到从WebSocket中获取数据流。一旦取到数据，我们可以把它们原始值的toString结果直接推入视图中。 但这种做法很少能具备良好的用户体验。 比如，几乎每个人都更喜欢简单的日期格式，例如1988-04-15，而不是系统或服务端传过来的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。我们可以通过管道来将这个日期格式转换在渲染到视图中<br>管道把数据作为输入，然后转换它，给出期望的输出。<br>管道(Pipe)可以根据开发者的意愿将数据格式化。</p><h3>内置管道</h3>
<p>ts文件</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">export class EditTheDeclarationComponent implements OnInit {
public time</span>=<span style="color: rgba(0, 0, 255, 1)">new</span> Date() <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取本地当前时间</span>
}</pre>
</div>
<p> </p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>时间：{{ time | date:"MM/dd/yy" }}<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)">10/30/19</span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>时间：{{ time | date }}<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)">Oct 30, 2019</span><span style="color: rgba(0, 128, 0, 1)">--></span></pre>
</div>
<p> </p>
<p>管道可能接受任何数量的可选参数来对它的输出进行微调。 我们可以在管道名后面添加一个冒号( : )再跟一个参数值，来为管道添加参数(比如currency:’EUR’)。 如果我们的管道可以接受多个参数，那么就用冒号来分隔这些参数值(比如slice：1:5)。可以理解对管道进行参数化的意思是：传入某些参数，对转换结果进行限制性的格式化转换。</p>
<h3>链式管道</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">我们可以把管道链在一起，以组合出一些潜在的有用功能。</span>
<div>时间：{{time | date:"fullDate"}}</div>
<!--Wednesday, October 30, 2019--><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将时间以fullDate类型输出</span>
<div>时间：{{time | date:"fullDate" | uppercase}}</div>
<!--WEDNESDAY, OCTOBER 30, 2019--><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将时间以fullDate类型输出 并转化为大写字母</span></pre>
</div>
<p> </p>
<p> </p>
<h3>常用的内置管道</h3>
<table>
<thead>
<tr><th>管道</th><th>类型</th><th>功能</th></tr>
</thead>
<tbody>
<tr>
<td>DatePipe</td>
<td>纯管道</td>
<td>日期格式化</td>
</tr>
<tr>
<td>JsonPipe</td>
<td>非纯管道</td>
<td>使用JSON.stringify()将对象转成json字符串</td>
</tr>
<tr>
<td>UpperCasePipe</td>
<td>纯管道</td>
<td>将文本中的字母全部转在大写</td>
</tr>
<tr>
<td>LowerCasePipe</td>
<td>纯管道</td>
<td>将文本中的字母全部转成小写</td>
</tr>
<tr>
<td>TitleCasePipe</td>
<td> </td>
<td>将文本转换成标题格式</td>
</tr>
<tr>
<td>DecimalPipe</td>
<td>纯管道</td>
<td>数值格式化</td>
</tr>
<tr>
<td>CurrencyPipe</td>
<td>纯管道</td>
<td>货币格式化</td>
</tr>
<tr>
<td>PercentPipe</td>
<td>纯管道</td>
<td>百分比格式化</td>
</tr>
<tr>
<td>SlicePipe</td>
<td>非纯管道</td>
<td>数组或字符串取切割</td>
</tr>
<tr>
<td>I18nPluralPipe</td>
<td> </td>
<td>根据expression的值匹配mapping中的值，并将匹配之后的值展示出来</td>
</tr>
<tr>
<td>I18nSelectPipe</td>
<td> </td>
<td>根据expression匹配mapping中的值，并且返回|匹配之后的值</td>
</tr>
</tbody>
</table>
<h3>自定义管道</h3>
<p>在Angular中我们可以使用下面命令来快速创建一个管道</p>
<div class="cnblogs_code">
<pre>新建管道：ng generate pipe pipes/string-pi</pre>
</div>
<p> </p>
<p>在创建的管道ts中</p>
<div class="cnblogs_code">
<pre>import { Pipe, PipeTransform } from '@angular/core'<span style="color: rgba(0, 0, 0, 1)">;
@Pipe({ name: </span>'idNumber'<span style="color: rgba(0, 0, 0, 1)"> })
export class StringPiPipe implements PipeTransform {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">管道所要执行的事件这个管道是身份证号的中间部分隐藏</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">例如{{Name | 管道}} value指的是Name值</span>
<span style="color: rgba(0, 0, 0, 1)">transform(value): any {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">idCard 将你value传过来的值进行正则修改 之后再返回idCard </span>
let idCard = value.replace(/(^\d{6}|\d{3})(\d{10})(\d{1})(\d{1}|X$)/, "$1**********$3$4"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> idCard;
}
}</span></pre>
</div>
<p> </p>
<p> </p>
<p>然后在你需要的地方的 xxxx.module.ts中引入；</p>
<div class="cnblogs_code">
<pre>import { StringPiPipe } from './pipes/string-pi.pipe';</pre>
</div>
<p> </p>
<p>并在@NgModule的 declarations中声明；</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">@NgModule({
declarations: [
AppComponent,
StringPiPipe, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">这一行-----------</span>
<span style="color: rgba(0, 0, 0, 1)">],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap:
})</span></pre>
</div>
<p> </p>
<p> </p>
<p>OK，现在你可以在HTML文件中用了，</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="idcard"</span><span style="color: rgba(0, 0, 255, 1)">></span>{{order.idNumber | idNumber }}<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/liyfya/p/13436046.html
頁:
[1]