changgong280513
changgong280513

Angular2指令语法知识点汇总

学习自www.angular.cn网站

内置指令(Built-in directives)

它们可分为属性型指令或结构型指令。

属性型指令会监听和修改其它HTML元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。 它们通常会作为HTML属性的名称而应用在元素上。

  1. NgClass - 添加或移除一组CSS类
  2. NgStyle - 添加或移除一组CSS样式
  3. NgModel - 双向绑定到HTML表单元素
NgClass
我们经常用动态添加或删除 CSS 类的方式来控制元素如何显示。 通过绑定到NgClass，可以同时添加或移除多个类。

CSS 类绑定 是添加或删除单个类的最佳途径。
[class.className]="true | false"

把ngClass绑定到一个 key:value 形式的控制对象。这个对象中的每个 key 都是一个 CSS 类名，如果它的 value 是true，这个类就会被加上，否则就会被移除。

currentClasses: {};
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

把NgClass属性绑定到currentClasses，根据它来设置此元素的CSS类：
This div is initially saveable, unchanged, and special


NgStyle
我们可以根据组件的状态动态设置内联样式。 NgStyle绑定可以同时设置多个内联样式。
样式绑定是设置单一样式值的简单方式。

NgModel - 使用[(ngModel)]双向绑定到表单元素（原生HTML元素，例如像和