Angular组件与模板之管道

管道

管道用与在显示数据的时候做一些处理,然后在输出来,

应用场景

  1. 例如显示时间的时候需要将时间的格式处理,让可读性更高

  2. 例如由于Angular提供了防注入的风险,在数据绑定的时候会把html字符串当做普通的字符串输出,如果需要显示html字符串所对应的功能,那么需要调用DomSanitizer类的bypassSecurityTrustHtml方法,在考虑到复用性和方便性的时候,可以将其作为一个管道,来进行处理

内置管道

在Angular中有一些管道是由Angular已经提供好了,例如 DatePipeUpperCasePipeLowerCasePipeCurrencyPipePercentPipe,不需要实现,只需要使用就可以了

以DatePipe为例子

//pipe-demo.component.ts
export class PipeDemoComponent implements OnInit {

  nowDate: Date = new Date();

}
<p>{{nowDate | date}}</p>

不适用管道输出为Tue Jun 18 2019 15:00:53 GMT+0800 (中国标准时间),使用管道之后输出为Jun 18, 2019,对于这种形式阅读感觉还不是特别好,所以可以添加一些参数

<p>{{date | date:"yyyy-MM-dd HH:mm:ss"}}</p>

这时候输出为2019-06-18 15:04:43,其中的-、和:都是自己定义的,当是yyyy这些是固定的,不能够更改,修改间隔

<p>{{date | date:"yyyy/MM/dd HH:mm:ss"}}</p>

有关更多日期格式的用法请参考这篇博客https://blog.csdn.net/u011763994/article/details/78747587

自定义管道

管道是可以自定义的

  1. 使用@Pipe为管道取个名字,例如为管道取名为exponentialStrengthPipe
@Pipe({
  name: 'exponentialStrengthPipe'
})
  1. 实现PipeTransform类,并重写transform方法

  2. declarations数组中添加该管道

创建管道

  1. 使用命令创建
ng generate pipe html

使用命令之后就在app目录下创建了一个管道,初始代码如下

// html.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'html'
})
export class HtmlPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

可以看到在app.module.ts文件中declarations数组新增了ExponentialStrengthPipePipe

// app.module.ts

import { HtmlPipe } from './pipe/html.pipe';

@NgModule({
  declarations: [
    //....
    HtmlPipe
  ],
})

如果不使用命令创建也可以,但所有的步骤不能够少

  1. 添加一个构造函数
// html.pipe.ts

  constructor(private domSanitizer: DomSanitizer) {

  }
  1. 重写transform方法
// html.pipe.ts

  transform(value: any, args?: any): any {
    return this.domSanitizer.bypassSecurityTrustHtml(value);
  }
  1. 使用
# pipe-demo.component.html

<div [innerHTML]="htmlDate | html"></div>
//pipe-demo.component.ts

  htmlDate: any = '<h2>hell world</h2>';

这样,一个自定义的管道就完成了

全部评论

相关推荐

不愿透露姓名的神秘牛友
07-10 11:55
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
07-09 11:15
点赞 评论 收藏
分享
06-27 12:54
已编辑
门头沟学院 Java
累了,讲讲我的大学经历吧,目前在家待业。我是一个二本院校软件工程专业。最开始选专业是觉得计算机感兴趣,所以选择了他。本人学习计算机是从大二暑假结束开始的,也就是大三开始。当时每天学习,我个人认为Java以及是我生活的一部分了,就这样持续学习了一年半,来到了大四上学期末,大概是在12月中旬,我终于找的到了一家上海中厂的实习,但我发现实习生的工作很枯燥,公司分配的活也不多,大多时间也是自己在自学。就这样我秋招末才找到实习。时间来到了3月中旬,公司说我可以转正,但是转正工资只有7000,不过很稳定,不加班,双休,因为要回学校参加答辩了,同时当时也是心高气傲,认为可以找到更好的,所以放弃了转正机会,回学校准备论文。准备论文期间就也没有投递简历。然后时间来到了5月中旬,这时春招基本也结束了,然后我开始投递简历,期间只是约到了几家下场面试。工资也只有6-7k,到现在我不知道该怎么办了。已经没有当初学习的心劲了,好累呀,但是又不知道该干什么去。在家就是打游戏,boss简历投一投。每天日重一次。26秋招都说是针对26届的人,25怎么办。我好绝望。要不要参加考公、考研、央国企这些的。有没有大佬可以帮帮我。为什么感觉别人找工作都是顺其自然的事情,我感觉自己每一步都在艰难追赶。八股文背了又忘背了又忘,我每次都花很长时间去理解他,可是现在感觉八股、项目都忘完了。真的已经没有力气再去学习了。图片是我的简历,有没有大哥可以指正一下,或者说我应该走哪条路,有点不想在找工作了。
码客明:太累了就休息一下兄弟,人生不会完蛋的
如果实习可以转正,你会不...
点赞 评论 收藏
分享
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
07-07 13:46
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务