Angular2学习笔记——模板语法——内部指令1

Ngclass

单一类增删的最佳方式是使用css类绑定

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

多个类增删则最好使用NgClass指令

<div [ngClass]="setClasses()">This div is saveable and special</div>

在组件方法中设置一个对象来管理各个css类的状态

setClasses() {
  let classes =  {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  };
  return classes;
}

Ngstyle

同样样式绑定是设置单一样式值的简单方式。

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
  This div is x-large.
</div>

若要设置多个内联样式，NgStyle指令可能是更好的选择

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

在组件方法中设置一个对象来管理

setStyles() {
  let styles = {
    // CSS property names
    'font-style':  this.canSave      ? 'italic' : 'normal',  // italic
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',  // normal
    'font-size':   this.isSpecial    ? '24px'   : '8px',     // 24px
  };
  return styles;
}