angular2多种绑定

angular提供绑定机制，解决mode-view耦合。

先看下Demo运行效果

1111.gif

data单向绑定

app.component.ts

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
})

export class AppComponent {
    name: string = "static";
}

app.component.html

<h2>{{name}}</h2>

data双向绑定

在app.module.ts导入FormsModule

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [BrowserModule,FormsModule],
    ...

修改app.component.html

<h2>{{name}}</h2>
name:<input [(ngModel)]="name" placeholder="name" />

事件绑定

app.component.html尾部新增

<button (click)="changeTitle()">change</button>

app.component.ts中实现changeTitle()方法

changeTitle(): void {
    this.name="sider";
}

style简单绑定

app.component.html

<h2 [style.color]="isStatic() ? 'red':'blue'">{{name}}</h2>

app.component.ts

isStatic(): Boolean {
    return this.name === 'static';
}

style组合绑定

app.component.html

<!--<h2 [style.color]="isStatic() ? 'red':'blue'">{{name}}</h2>-->
# <h2 [ngStyle]="setStyles()">{{name}}</h2>

app.component.ts

    setStyles(): Object {
        let styles = {
            'color': this.isStatic() ? 'red' : 'blue',
            'font-size': this.isStatic() ? '3rem' : '2rem',
            'font-style': this.isStatic() ? 'italic' : 'normal'
        };
        return styles;
    }

class绑定

新增app.component.css文件且在app.component.ts引用

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})

• class

app.component.css

.awestatic {
    color: red;
}

app.component.html

<h2 [class.awestatic]="isStatic()">{{name}}</h2>

• ngClass

app.component.html

<!--<h2 [style.color]="isStatic() ? 'red':'blue'">{{name}}</h2>-->
<!--<h2 [ngStyle]="setStyles()">{{name}}</h2>-->
<!--<h2 [class.awestatic]="isStatic()" [class.awesider]="!isStatic()">{{name}}</h2>-->
<h2 [ngClass]="setClasses()">{{name}}</h2>

app.component.css

.awestatic {
    color: red;
    font-style: italic;
}

.awesider {
    color: blue;
    font-style: normal;
}

.move {
    position: relative;
    -webkit-animation: move 1s infinite;
    -webkit-animation-duration: 3s;
}

@-webkit-keyframes move {
    0% {
        left: 0px;
    }
    50% {
        left: 200px;
    }
    100% {
        left: 0px;
    }
}

app.component.ts

    setClasses(): Object {
        let classes = {
            awestatic: this.isStatic(),
            awesider: !this.isStatic(),
            move: !this.isStatic()
        };
        return classes;
    }