Angular核心概念之五---过滤器
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核心概念之五---过滤器的更多相关文章
- Angular核心概念
一.集成开发环境@angular/cli IE8之后才有debugger工具 2009,nodejs发布,前端Big Bang 1.1 基于NodeJS的工具链 打包工具 grunt 对js代码做合并 ...
- Angular 核心概念
module(模块) 作用 通过模块对页面进行业务上的划分,根据不同的功能划分不同的模块. 将重复使用的指令或者过滤器之类的代码做成模块,方便复用 注意必须指定第二个参数,否则变成找到已经定义的模块 ...
- Angular 核心概念2
自定义指令 指令增强了 HTML,提供额外的功能 内置的指令基本上已经可以满足我们的绝大多数需要了 少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现 普通指令 语法 <div hel ...
- 2 Angular 2 的核心概念
一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成 ...
- Angularjs -- 核心概念
angularjs旨在减轻使用AJAX开发应用程序的复杂度,使得程序的创建.測试.扩展和维护变得easy.以下是angularjs中的一些核心概念. 1. client模板 多页面的应用通 ...
- 第214天:Angular 基础概念
一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...
- Spring 核心概念
Spring 核心概念 引言 本文主要介绍 Spring 源码中使用到的一些核心类 1. BeanDefinition BeanDefinition表示Bean定义,BeanDefinition 中存 ...
- 领域驱动设计(DDD)部分核心概念的个人理解
领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...
- Javascript本质第一篇:核心概念
很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...
随机推荐
- 深入理解PHP之数组(遍历顺序)
作者: Laruence 本文地址: http://www.laruence.com/2009/08/23/1065.html 转载请注明出处 经常会有人问我, PHP的数组, 如果用foreach来 ...
- 2019-2020-20199303《Linux内核原理与分析》第四周作业
构造一个简单的Linux内核 Linux是一种开源电脑操作系统内核,它是一个用C语言写成.主要子系统: 1.系统调用接口 2.进程管理 3.内存管理 4.虚拟文件系统 qemu是一个开源模拟处理器,在 ...
- 鸟哥Linux私房菜(基础篇)——第十一章:认识与学习Bash
1.变量的取用与设定 ●变量的取用:echo ●变量的设定规则 变量与变量内容以一个等号『=』来连结. 等号两边不能直接接空格符. 变量名称只能是英文字母和数字,但是开头字符不能是数字. 变量内容若有 ...
- Scala教程之:静态类型
文章目录 泛类型 型变 协变 逆变 不变 类型上界 类型下界 内部类 抽象类型 复合类型 自类型 隐式参数 隐式转换 多态方法 类型推断 Scala是静态类型的,它拥有一个强大的类型系统,静态地强制以 ...
- FileStream提示文件正在由另一进程使用的解决方法
文件正在由另一进程使用…… FileStream fs = new FileStream(strFilePath, FileMode.Open,FileAccess.Read,FileShare.Re ...
- spark系列-7、spark调优
官网说明:http://spark.apache.org/docs/2.1.1/tuning.html#data-serialization 一.JVM调优 1.1.Java虚拟机垃圾回收调优的背景 ...
- Android | 带你零代码实现安卓扫码功能
目录 小序 背景介绍 前期准备 开始搬运 结语 小序 这是一篇纯新手教学,本人之前没有任何安卓开发经验(尴尬),本文也不涉及任何代码就可以使用一个扫码demo,华为scankit真是新手的福音-- ...
- spring mvc实现转发和重定向
转发:服务器端请求的跳转 同一个请求之内 重定向:客户端请求的跳转 两次请求 转发和重定向的区别: 1,转发地址栏不会发生变化,重定向地址栏会发生变化. 2,转发请求的参数不会丢失 重定向参数会丢失. ...
- 保姆式教学:Typora+图床功能
众所周知,markdown编辑器typora是一款很好的可视化.所见即所得型的编辑器! 但是,因为图片问题,本菜狗常常不能把某些写好的markdown文档直接复制粘贴进博客而不加修改-- 不过,前几天 ...
- leetcode_二叉树验证(BFS、哈希集合)
题目描述: 二叉树上有 n 个节点,按从 0 到 n - 1 编号,其中节点 i 的两个子节点分别是 leftChild[i] 和 rightChild[i]. 只有 所有 节点能够形成且 只 形成 ...