Angular2 - 事件和属性 - 01

前面一张我们构建了新的Component，现在我们就开始学习Angular2的新语法，看看如何使用Angular2的新语法和属性。

首先我们mock一个Hero对象的数组。然后我们对这个数组做系列的操作。

import { Hero } from './hero' //如果你想要使用某一个对象。必须提交导入

export const HEROES:Hero[] = [
  { id: 1, name: 'Bruce' },
  { id: 2, name: 'Jason' },
  { id: 3, name: 'Jack' },
  { id: 4, name: 'Rose' },
  { id: 5, name: 'Tornado' },
  { id: 6, name: 'Bruce' }
]

然后在你需要使用的component 里面导入即可。这样我们就可以使用这个数组了。

import { HEROES } from '../Entities/mock-heroes'

• *ngFor ，复制宿主元素以及 所有的子元素。（前面的* 是Angular的关键部分，不能忘记。）

　     在Angular1.x 中当我们想要复制宿主元素的时候我们使用的ng-repeat，Angular2中。我们可以在标签上面添加*ngFor 来遍历HEROES。包含name=“for”的元素。已经子元素都将被复制。

<div name="for" *ngFor="let hero of heroes">
  <div>
    id : {{hero.id}} ，
    name : {{hero.name}}
  </div>
</div>

• (click) ，click 事件

<div *ngFor="let hero of heroes">
  <div (click) ="selectHero()"> //调用Component中的方法
    id : {{hero.id}} ，
    name : {{hero.name}}
  </div>
</div>

  //Component中对应的click方法。
  selectedHero: Hero;
  selectHero(hero: Hero): void {
    this.selectedHero = hero;
  }

• [(ngModule)]，双向绑定属性，上一片我们已经有过接触。属性对应angular1.x中的ng-module。在使用ngModel进行双向绑定的时候，你必须导入FormsModule并吧他添加到Angular 模块的imports列表中。
• *ngIf = "expression"，对应angular1.x中的ng-if，具体用法如下，当expression=true的时候会显示元素和子元素，当expression=false，将不会出现DOM元素。元素在DOM中不站位。

<div *ngIf="expression">
   这是ngIf
</div>

• [class.some-css-class] = "expression"，前面的class是固定写法。some-css-class对应你的css文件中的css class。当expression=true的时候some-css-class将会添加到元素上面，当expression= false，css将不会添加到元素上面。

[class.selected]="hero === selectedHero"

• [style.color] = "expression"，前面的style固定写法。类似上面提到的[class.some-css-class]，这个返回的是单个style的样式。

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

• [hidden] = "expression"，expression 是引用的Component 中的boolean属性，标识是否隐藏DOM元素。

<span [hidden]="isUnchanged">changed</span>

• [disabled] = "expression"，从DOM的方面来看。如果button设置了disableed无论这个值是true还是false这个button任然被禁用。但是通过Angular的disabled属性可以禁用或者启用按钮，我们可以通过设置expression的返回值来禁用或者启用button

<button [disabled]="isDisabled">Submit</button>

• ngClass = "expression"，Angular可以通过expression的方式来添加不同的cssl给DOM元素

//当isSpecial = true 时。special css将会添加到DOM中
<div [ngClass]="{'special': isSpecial}"></div>

//当isSpecial = true 时。special css将会添加到DOM中
//当isSpecial = false 时。normal css将会添加到DOM中

<div [ngClass]="{'special': isSpecial,'normal' : !isSpecial}"></div>

//也可以通过函数返回不同条件下的css
<div [ngClass]="currentClasses"></div>

//Component 中的function
currentClasses: {}; 
setCurrentClasses() { 
   this.currentClasses = { 
      'saveable': this.canSave, 
      'modified': !this.isUnchanged, 
      'special': this.isSpecial 
   }; 
}

•  [ngStyle] 同时设置多个内联样式

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

currentStyles: {};
setCurrentStyles() {
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}