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的判断,根据文字内容可以切换不同的文字样式。

Javascript专题

使用Angular2建立一个可扩展单页应用