(十)、Angular4.0 数据绑定、管道

一、基本HTML属性绑定

• tableColspan的值会赋给colspan

<td [attr.colspan]="tableColspan">Something</td>

二、CSS类绑定

• [class]中的值someExpression会覆盖"aaa bbb"

<div class="aaa bbb" [class]="someExpression">something</div>

• 如果isSpecial为true，则显示[class.special]中的special的值
  

<div [class.special]="isSpecial">something</div>

• 控制多个class是否显示
  

<div [ngClass]="{aaa:isA, bbb:isB}"></div>

三、样式绑定

• 如果isSpecial为true，则color为red
  

<button [style.color]="isSpecial ? 'red':'green'"></button>

• font-style是要覆盖的样式 , 如果canSave为false，则使用normal
  

<button [ngStyle]="{'font-style':this.canSave ? 'itailc':'normal'}"></button>

四、双向绑定 (每3秒会重置name为Tom)

app.component.ts

  name: string;

  constructor() {
    setInterval(() => {
      this.name = 'Tom';
    }, 3000);
  }

app.component.html

<input [(ngModel)]="name">
{{name}}

五、新建自定义管道

ng g pipe pipe/multiPle

注意查看@NgModule中的declarations属性有没有MultiPlePipe

六、定义自己的管道逻辑 multi-ple.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'multiPle'
})
export class MultiPlePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (!args) {
      args = 1;
    }
    return value * args;
  }

}

七、app.component.html中 使用管道

<p>测试：{{size | multiPle:'2'}}</p>

八、app.component.ts 中给size赋值

  size = 7;

九、启动项目，测试结果：