À propos de l'utilisation des données au format de canal personnalisé dans Angular2

Cet article présente principalement l'utilisation du pipeline Angular2 Pipe et des données au format de pipeline personnalisé. Il analyse en détail les concepts, la syntaxe et les compétences d'utilisation du pipeline Angular2 et du pipeline pur sous forme d'exemples.

Les exemples de cet article décrivent l'utilisation du pipeline Angular2 Pipe et des données au format de canal personnalisé. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Pipe peut formater les données selon les souhaits du développeur, et peut également connecter plusieurs tuyaux en série.

Tuyau pur et tuyau impur

Le pipeline est divisé en tuyau pur et tuyau impur (tuyau impur). Par défaut, les tubes sont purs. Si vous définissez l'indicateur pure sur false lors de la déclaration d'un tube personnalisé, cela signifie que le tube n'est pas pur. Par exemple :

@Pipe({
 name: 'sexReform',
 pure:false
})

La différence entre les tuyaux purs et les tuyaux impurs :

① Tuyaux purs :

Angular vérifie uniquement que la valeur d'entrée is pure Les pipelines purs ne sont exécutés que lorsque des modifications sont apportées. Les changements purs font référence à des changements dans les valeurs de type primitif (String,Number,Boolean,Symbol) ou à des changements dans les références d'objets (Les changements de valeur d'objet ne sont pas de purs changements et ne seront pas exécutés).

② Pipeline impur

Angular exécutera des pipelines impurs dans le cycle de détection de changement de chaque composant. Par conséquent, si nous utilisons des tuyaux impurs, nous devons prêter attention aux problèmes de performances.

Syntaxe d'utilisation des tuyaux

{{expression | pipe : arg}}

S'il s'agit d'une concaténation de chaîne :

{{expression | pipe1 : arg | pipe2 | pipe3 }}

Tuyaux intégrés couramment utilisés

管道	类型	功能
DatePipe	纯管道	日期格式化
JsonPipe	非纯管道	使用JSON.stringify()将对象转成json字符串
UpperCasePipe	纯管道	将文本中的字母全部转在大写
LowerCasePipe	纯管道	将文本中的字母全部转成小写
DecimalPipe	纯管道	数值格式化
CurrencyPipe	纯管道	货币格式化
PercentPipe	纯管道	百分比格式化
SlicePipe	非纯管道	数组或字符串取切割

DatePipe

语法:{{expression | date:format}}

expression支持日期对象、日期字符串、毫秒级时间戳。format是指定的格式,常用标志符：

y 年 y使用4位数字表示年份(2017),yy使用两位数字表示(17)
M 月 M 1位或两位数字(2或10、11、12),MM 两位数字表示，前面补0(02)
d 日 d 一位或两位数字(9) dd两位数字，前面补0(09)
E 星期 EEE 三位字母缩写的星期 EEEE 星期全称
j 12小时制时间 j (9 AM) jj (09 AM)
h 12小时制小时 h(9) hh (09)
H 24小时制小时 H(9) HH (09)
m 分 m (5) mm (05)
s 秒 s (1) ss (01)
z 时区 z China Standard Time

DecimalPipe

语法：{{expression | number[: digiInfo] }}

digiInfo格式:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

即：整数位保留最小位数.小数位保留最小位数-小数位最大保留位置

默认值: 1.0-3

CurrencyPipe

语法：{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}

digiInfo格式与DecimalPipe相同，不再解释。

currencyCod是指货币代码，其值为ISO 4217标准，人民币CNY,美元USD,欧元 EUR.
symbolDisplay 是一个布尔值，true时显示货币符号($￥) false显示货币码

PercentPipe

语法：{{expression | percent[: digiInfo] }}

digiInfo格式与DecimalPipe相同，不再解释。

SlicePipe

语法：{{expression | slice: start [: end] }}

expression 可以是一个字符串或数组。字符串时，该管道调用String.prototype.slice()方法截取子串。如果是数组，调用Array.prototype.slice()方法取数组子元素。

自定义管道

除了使用内置的管道，还可以通过自定义管道实现更复杂的功能。

创建管道:

ng g pipe sexReform

angular-cli会帮我们创建SexReformPipe管道,这个管道的功能是根据male、female返回中文的男、女。

代码:

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
 name: 'sexReform',
 //非纯管道
 pure:false
})
export class SexReformPipe implements PipeTransform {
 transform(value: any, args?: any): any {
  let chineseSex;
  switch (value) {
   case 'male':
    chineseSex = '男';
    break;
   case 'female':
    chineseSex = '女';
    break;
   default:
    chineseSex = '未知性别';
    break;
  }
  return chineseSex;
 }
}

重点在于实现PipeTransform接口的transform方法，定义为非纯管道仅用于演示，非纯管道对性能影响较大，尽量避免。

演示代码

组件：

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-pipe',
 templateUrl: './pipe.component.html',
 styleUrls: ['./pipe.component.css']
})
export class PipeComponent implements OnInit {
 date=new Date();
 money=5.9372;
 object={title:'ffff',subTitle:'subtitlefff'};
 str='abcdABCD';
 percent=0.97989;
 constructor() { }
 ngOnInit() {
 }
}

模板:

<p>
 {{date| date:&#39;y-MM-dd HH:mm:ss&#39;}} <br />
 {{object| json }} <br />
 {{str| uppercase }} <br />
 {{str| lowercase }} <br />
 {{money| number:&#39;2.4-10&#39; }} <br />
 {{money| number:&#39;5.1-2&#39; }} <br />
 {{money| currency:&#39;CNY&#39;:false:&#39;1.1-2&#39; }} <br />
 {{percent| percent:&#39;1.1-2&#39; }} <br />
 {{str| slice:1:3 }} <br />
 {{&#39;female&#39;| sexReform }} <br />
</p>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详细解读分析JavaScript代码模块

在微信小程序中如何实现点赞功能

有关JavaScript数组操作难点（详细教程）

使用vue如何实现无缝滚动组件

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!