Angular4.0 基础知识之组件
Angular4.0 基础知识之路由
Angular4.0 依赖注入
Angular4.0 数据绑定 & 管道
数据绑定允许你将组件控制器的属性和方法与组件的模板连接起来,大大降低了开发时的编码量。
常见的表现形式有:
,即把属性 | 表达式插入到 html 标签中
- <h1>{{title}}</h1>
,也就是将属性 | 表达式绑定到 HTML 标签的属性上
- <img [src]="imgUrl" />
,讲组件控制器的一个方法绑定到模板元素的事件上
- <button (click)="show()"></button>
在 Angular 中,默认的数据绑定是单向的(AngularJS1.0 中全部是双向绑定,这也是性能差的原因之一),所谓的双向绑定,也就是控制器的属性反映到模板中,同时,模板中显示出的属性被修改之后,对应的控制器属性同时发生变化;单向绑定取出了模板 => 控制器的方向,使性能大大提升。(当然,双向绑定并不是被去掉了,你也可以手动指定使用双向绑定, 双向绑定现在变成了一个可选项,而不是框架的默认行为)
- <button (click)="doOnClick($event)"></button>
- doOnClick(event: any) {
- console.log(event);
- }
如上代码是一个经典的事件绑定例子,被绑定的事件可以是一个标准事件也可以是一个自定义事件,绑定的操作可以是控制器里的一个方法,也可以只一个赋值表达式等等。
如下例子所示
- // 使用属性绑定
- < img[src] = "imgUrl" / >
- // 使用插值表达式
- < img src = "{{imgUrl}}" / >
又是一个经典的例子,不难理解,上面两个方法实现的效果是完全一致的,事实上,这两个方法没有优劣之分,你只需要按照自己的喜好去选择即可
- <td [attr.colspan]="value"></td>
- <div class="aaa bbb" [class]="val"></div> // 这种情况会覆盖原先的class
- <div [class.aaa]="booleanVal"></div> // 通过一个Boolean值开关来控制是否启用某一个class名,适合管理单一class名
- <div [ngClass]="{aaa:isA,bbb:isB}"></div> // 通过对象的形式开控制多个class的开关,适合同时管理多个className
和 class 绑定类似,只不过绑定的对象为 style 属性
- <button [style.color]="isRed?'red':'green'">Red</button>
- <div [ngStyle]="{color:red,'font-style':bool?'italic':'normal'}"></div>
双向绑定即视图和模型保持同步,无论视图和模型哪一方改变,另一方都一起同步改变。
前面所学到的事件绑定是从视图到模型,把模板中元素的事件绑定到控制器中的方法;属性绑定的方向是从控制器到模板,使用方括号讲组件控制器的属性绑定到模板。
- <input [value]="name" (input)="doOnInput($event)" />
- export class BindComponent implements OnInit {
- name: string;
- doOnInput(event) {
- this.name = event.target.value;
- }
- }
这样就实现了一个双向绑定,当 input 内容变化的时候,出发事件,修改模型中的属性值,当模型中的属性值改变的时候,优惠在视图中表现出来。
当然,Angular 肯定提供了内置的双向绑定支持:
- <input [(ngModel)]="name" />
由于
用在 input 元素上,默认绑定的是
- [(ngModel)]
事件。双向绑定最常用的用途就是表单处理。
- input
当然,双向绑定本来就应该用于 input 系列元素上,因为这些元素允许你去修改这些值,并显示出来。
将会在表单处理章节更详细讲。
举个例子,例如我要在页面上显示我的生日信息,假设现在从服务器获取到的日期是一个 Date 对象,那么把它直接输出到页面上肯定是用户体验很不好的(一大串乱七八糟的字符串)。管道就是用来处理数据的,从原始值到你所需要的值,这一个过程。
使用实例:
- <p>{{birthday | date | uppercase}}</p>
上面例子中我们就使用了两个内置的管道,第一个是获取到 Date 对象的日期信息,第二个是把小写字母转换成大写。
常用的管道:
date 日期管道
日期管道符可以接受参数,用来规定输出日期的格式。
- <p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
number 数字处理管道
接收的参数格式为 {最少整数位数}.{最少小数位数}-{最多小数位数}
其中最少整数位数默认为 1
最少小数位数默认为 0
最多小数位数默认为 3
当小数位数少于规定的 {最少小数位数} 时,会自动补 0
当小数位数多于规定的 {最多小数位数} 时,会四舍五入
,此处用来做 Demo 的管道作用是扒一个数放大 n 倍,也就是乘法……
- ng g pipe pipe/multiple
生成的管道代码:
- import { Pipe, PipeTransform } from '@angular/core';
- @Pipe({
- name: 'multiple'
- })
- export class MultiplePipe implements PipeTransform {
- transform(value: any, args?: any): any {
- return null;
- }
- }
可以看出,管道是一个实现了 PipeTransform 并且带有 @Pipe 装饰器的类,用于把源数据根据参数和方法定义处理成想要的结果。
但是,当你打开
的时候,你会发现在 declaration 数组里多出来了一个 MultiplePipe 的声明,也就是说,管道也是需要声明的,只是命令行工具自动添加进去了。
- app.modules.ts
其中 value 是管道前端的原始值,args 是一个可选参数,也就是管道的参数,最终管道把处理结果返回出去即可。
如下,我们很轻易地创建了一个管道:
- import {Pipe, PipeTransform} from '@angular/core';
- @Pipe({
- name: 'multiple'
- })
- export class MultiplePipe implements PipeTransform {
- transform(value: number, args?: number): number {
- if (!args) {
- args = 1;
- }
- return value * args;
- }
- }
在实战项目中,我们对管道有了新的用法,根据传入的参数来过滤商品列表:
- import {Pipe, PipeTransform} from '@angular/core';
- import {Product} from '../shared/product.service';
- @Pipe({
- name: 'productFilter'
- })
- export class ProductFilterPipe implements PipeTransform {
- transform(productList: Product[], filterField: string, keyword: string): any {
- if (!filterField || !keyword) {
- return productList;
- }
- return productList.filter((product: Product) => product[filterField].indexOf(keyword) >= 0);
- }
- }
来源: http://www.cnblogs.com/wxjblog/p/7277655.html