Angular2的事件绑定和样式绑定
Angular 2 引入了新的模板语法和指令,让我们在自己应用中产生数据,这里介绍一下事件绑定,后学会有样式和类绑定。
在Angular中,数据绑定是描述模型和视图之间的同步,为了简单解释,假设我们模板有一个简单表达式:
<h1>{{firstname}}</h1>
无论{{firstname}}什么时候改变,我们都要DOM跟着更新,这个过程是通过数据绑定方式触发DOM更新的,one-way绑定是一种从模型到视图的单向绑定,也就是模型变化才能导致视图变化。
two-way数据绑定则是双向的,不只是模型才能导致视图变化,反过来也可以,这就意味着模型和视图总是同步的,换句话说,你可以将视图看成模型的一个实例对象。
让我们看看是如何工作的:
<h1>{{firstname}}</h1>
Name: <input type="text" [(ngModel)]="firstname">
Javascript代码如下:
export class MyApp {
firstname: string = 'Jimmy';
}
当你在输入框输入任何名称,h1处大写字体都会实时显示你输入的内容。注意绑定语法 [(ngModel)]和Angular 1.x的不同。
事件绑定
让我们增加一个点击事件到上面代码中:
<h1>{{firstname}}</h1>
Name: <input type="text" [(ngModel)]="firstname">
<button (click)="changeName()">Change Name</button>
Javascript代码如下:
export class MyApp {
firstname: string = 'Jimmy';
changeName() { this.firstname = 'Houssein'; }
}
这里增加了一个change Name的点击按钮,点击它会让h1大写的标题文字内容改变。
带有双括号的(click)会触发事件changeName()方法。而Angular 1.x中是这么写:ng-click="changeName()"
样式绑定
Angular 2能让我们有条件地增加样式style到具体Html元素上,有不同的方式,下面是其中一种:
<h1 [style.color]="isHoussein() ? 'red': 'black'">{{firstname}}</h1>
Name: <input type="text" [(ngModel)]="firstname">
<button (click)="changeName()">Change Name</button>
Javascript代码:
export class MyApp {
firstname: string = 'Jimmy';
changeName() { this.firstname = 'Houssein'; }
isHoussein() { return this.firstname === 'Houssein'; }
}
当我们点击change name按钮时,标题内容不但变化了,而且颜色也不同了。
style是CSS样式的属性:[style.color],这里颜色样式属性被绑定到模板表达式isHoussein()。
如果你要设置多个内联样式怎么办?使用ngStyle,我们能将多个样式属性逐个连接到它们的条件,这是通过一个key-value对象实现:
<h1 [ngStyle]="setStyles()">{{firstname}}</h1>
Name: <input type="text" [(ngModel)]="firstname">
<button (click)="changeName()">Change Name</button>
JavaScript代码:
export class App {
firstname: string = 'Jimmy';
changeName () { this.firstname = this.alternate ? 'Daniel' : 'Houssein'; this.alternate = !this.alternate; }
isHoussein() { return this.firstname === 'Houssein'; }
isDaniel() { return this.firstname === 'Daniel'; }
setStyles() { let styles = { 'color': this.isHoussein() ? 'red' : 'black', 'font-size': this.isDaniel() ? '3em' : '2em', 'font-style': this.isDaniel() || this.isHoussein() ? 'italic' : 'normal', }; return styles; }
}
这个就以此根据改变的名称显示不同的颜色,每次点击按钮会更换以恶搞名称,再根据setStyles方法中名称判断获得不同字体颜色和大小。
类绑定
类似于样式绑定,类绑定能让你基于变量或表达式增加或移除样式类。如下:
<h1 [class.awesome]="isHoussein()">{{firstname}}</h1>
Name: <input type="text" [(ngModel)]="firstname">
<button (click)="changeName()">Change Name</button>
CSS样式:
.awesome { color: red; }
Javascript代码:
export class MyApp {
firstname: string = 'Jimmy';
changeName() { this.firstname = 'Houssein'; }
isHoussein() { return this.firstname === 'Houssein'; }
}
当模板表达式isHoussein()是真时,[class.awesome]绑定到了指定的.awesome样式类。
同样适用ngClass可以同时绑定多个样式类。
<h1 [ngClass]="setClasses()">{{firstname}}</h1>
Name: <input type="text" [(ngModel)]="firstname">
<button (click)="changeName()">Change Name</button>
CSS:
.italic { font-style: italic; }
.awesome { color: red; }
.move { position: relative; animation:move 1s infinite; animation-duration: 3s; }
@keyframes move { 0% {left:0px;} 50% {left:200px;} 100% {left:0px;} }
Javascript代码:
export class App {
firstname: string = 'Jimmy'; alternate: boolean = false;
changeName() { this.firstname = this.alternate ? 'Daniel' : 'Houssein'; this.alternate = !this.alternate; }
isHoussein() { return this.firstname === 'Houssein'; }
isDaniel() { return this.firstname === 'Daniel'; }
setClasses() { let classes = { awesome: this.isHoussein(); move: this.isDaniel(); italic: this.isHoussein() || this.isDaniel(); } return classes; }
}
很显然,通过setCLasses的判断,根据文字内容可以切换不同的文字样式。