Filter:过滤器,用于在view中呈现数据时显示为另一种格式;过滤器的本质是一个函数,接收原始数据转换为新的格式进行输出:

function(oldVal){ ... return newVal }

使用过滤器:{{ e.salary  | 过滤器名 }}

Angular2.x中,过滤器更名为  “管道(Pipe)”

自定义管道的步骤:

1.创建管道class,实现转换功能

@Pipe({ name:'sex' })

export class SexPipe{

transform(val){ return ....}

}

2.在模块中注册管道

//app.module.ts

declarations:[ SexPipe ]

3.在模板视图中使用管道

{{e.empSex | sex}}

<p [title]="empSex | sex"></p>

说明:管道的transform方法除了val还可以接受其他参数,

调用管道时用冒号为这些参数赋值,例如:{{e.empSex | sex:'en' }}

创建管道对象的简便工具: ng  g  pipe  管道名

Vue.js中没有预定义管道;Angular提供了几个预定义管道:

1.lowercase:转换为小写

{{ename | lowercase }}

2.uppercase:转换为大写

{{ename | uppercase }}

3.titlecase:转换为首字母大写

{{ename | titlecase }}

4.slice:只显示字符串的一部分

{{ename | slice : 0 : 3 }}

5.json:将JS对象序列化为JSON字符串

{{obj | json }}

6.number:把数字转换为具有指定整数位和小数位的字符串

{{num | number }}

{{num | number:'4.1 -4 '}}

7.currency:把数字转换为货币格式字符串:货币符号+三位一逗号+两位小数位

{{num | currency }}

{{num | currency:'¥' }}

8.date:把数字转换为日期字符串

{{num | date:'yyyy-MM-dd HH:mm:ss' }}

2.创建对象的两种方式

方式一:手工创建式  --------自己创建:let  c2 = new  Car()

 方式二:依赖注入   ---------无需自己new,只需要声明依赖;

服务提供者就会创建被依赖的对象,注入给服务需要者。

3.Angular核心概念之六  -----服务和依赖注入-----抽象&重点!

Service:服务,Aangular认为:组件是与用户交互的一种对象,其中的内容都应该

与用户操作有关系的;而与用户操作无关的内容都应该剥离出去,放在“服务对象”中,

为组件服务;例如日志记录、计时统计、数据服务器访问.....

创建服务对象的步骤:

1.创建服务对象并指定服务提供者

@Injectable({ providedIn:'root' })

export class LogService{    }

 2.在组件中声明依赖,服务提供者就会自动注入进来,组件直接使用服务对象即可。

export class XxComponent{

constructor(log:LogService){

//此处的log变量就会被注入为LogService实例

}

}

面试题:前端有哪些异步请求工具?各自的利弊?

1.原生的XHR

2.jQuery.ajax()

3.Axios

4.Angular     HttpClient

5.Fetch

使用服务对象时(依赖注入)常见错误:

ERROR NullInjectorError: StaticInjectorError(AppModule)[Myc03Component -> LogService]:
StaticInjectorError(Platform: core)[Myc03Component -> LogService]:
NullInjectorError: No provider for LogService!

指定的服务对象没有服务提供者;

解决方案:

1.保证创建服务对象时指定providedIn:'root'

2.组件声明依赖时服务对象不能写错

4.使用Angular官方提供的服务对象-----HttpClient  Service

HttpClient服务对象用于指定的URL发起异步请求,使用步骤:

1.在主模块中导入HttpClient服务所在的模块

//app.module.ts

imports:[ BrowserModule,FormsModule,HttpClientModule ]

2.在需要使用异步请求的组件中声明依赖于HttpClient服务对象,就可以使用该对象发起

异步请求了。

http = null

constructor( http:HttpClient ){

this.http =http

}

Angular核心概念之五---过滤器的更多相关文章

  1. Angular核心概念

    一.集成开发环境@angular/cli IE8之后才有debugger工具 2009,nodejs发布,前端Big Bang 1.1 基于NodeJS的工具链 打包工具 grunt 对js代码做合并 ...

  2. Angular 核心概念

    module(模块) 作用 通过模块对页面进行业务上的划分,根据不同的功能划分不同的模块. 将重复使用的指令或者过滤器之类的代码做成模块,方便复用 注意必须指定第二个参数,否则变成找到已经定义的模块 ...

  3. Angular 核心概念2

    自定义指令 指令增强了 HTML,提供额外的功能 内置的指令基本上已经可以满足我们的绝大多数需要了 少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现 普通指令 语法 <div hel ...

  4. 2 Angular 2 的核心概念

    一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成 ...

  5. Angularjs -- 核心概念

     angularjs旨在减轻使用AJAX开发应用程序的复杂度,使得程序的创建.測试.扩展和维护变得easy.以下是angularjs中的一些核心概念. 1. client模板      多页面的应用通 ...

  6. 第214天:Angular 基础概念

    一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...

  7. Spring 核心概念

    Spring 核心概念 引言 本文主要介绍 Spring 源码中使用到的一些核心类 1. BeanDefinition BeanDefinition表示Bean定义,BeanDefinition 中存 ...

  8. 领域驱动设计(DDD)部分核心概念的个人理解

    领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...

  9. Javascript本质第一篇:核心概念

    很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...

随机推荐

  1. 暑期档追剧指南曝光 HUAWEI nova 2系列再放实用三大招

    火辣辣的夏季来啦,每年这时火热的不只天气,还有暑期黄金档影视剧的激烈争夺战.今年有<择天记>收视率珠玉在前,<欢乐颂2>更是引发全民追剧热潮,"小花"赵丽颖 ...

  2. 发布AI芯片昆仑和百度大脑3.0、L4自动驾驶巴士量产下线,这是百度All in AI一年后的最新答卷...

    机器之心报道,作者:李泽南. 去年的 7 月 5 日,百度在北京国际会议中心开办了首届「AI 开发者大会」.在会上,百度首次喊出了「All in AI」的口号.一年的时间过去了,今天在同样地点举行的第 ...

  3. Eclipse Collections:让Java Streams更上一层楼

    \ 关键要点 \\ Eclipse Collections是一个高性能的Java集合框架,为原生JDK集合增加了丰富的功能.\\t Streams是JDK的一个非常受欢迎的功能,但它缺少了一些特性,严 ...

  4. 单源最短路径:Dijkstra算法(堆优化)

    前言:趁着对Dijkstra还有点印象,赶快写一篇笔记. 注意:本文章面向已有Dijkstra算法基础的童鞋. 简介 单源最短路径,在我的理解里就是求从一个源点(起点)到其它点的最短路径的长度. 当然 ...

  5. 最短路径树:Dijstra算法

    一.背景 全文根据<算法-第四版>,Dijkstra算法.我们把问题抽象为2步:1.数据结构抽象   2.实现 二.算法分析 2.1 数据结构 顶点+边->图.注意:Dijkstra ...

  6. P1714切蛋糕(不定区间最值)

    题面 今天是小Z的生日,同学们为他带来了一块蛋糕.这块蛋糕是一个长方体,被用不同色彩分成了N个相同的小块,每小块都有对应的幸运值. 小Z作为寿星,自然希望吃到的第一块蛋糕的幸运值总和最大,但小Z最多又 ...

  7. saltstack升级

    1.背景 saltstack出现安全漏洞,5.1前后爆出很多设备已经变成矿机. 2.处理方法 升级到最新版本salt 3.官方升级方法 yum install https://repo.saltsta ...

  8. 戴尔服务器ipmi报错

    戴尔服务器ipmi配置完成,用浏览器打开报错 查看器已终止,网络已中断 原因:这个问题是java报错,用火狐打开报错 解决方法: 用IE打开就没问题,IE要用较高版本的,楼主的是win10-IE11

  9. uniapp自定义简单弹窗组件

    2.0(2019-08-31) 船新版本的信息弹窗组件 插件市场地址:http://ext.dcloud.net.cn/plugin?id=672 可以弹出很多条信息,并单独控制消失时间.点击消失. ...

  10. Coursera课程笔记----计算导论与C语言基础----Week 8

    C语言中的运算成分(Week 8) 赋值运算符 "="赋值运算符 给赋值号左边的变量赋予数值 在变量定义的同时可以为变量赋初值 要点一:两面类型不同 若=两边的类型不一致,赋值时要 ...