Angular学习笔记-常用指令

NgIf

NgSwitch

有时候需要根据不同的条件，渲染不同的元素，此时我们可以使用多个 ngIf 来实现。

    
Var is A
    
Var is B
    
Var is something else
  

如果 myVar 的可选值多了一个 'C'，就得相应增加判断逻辑：

    
Var is A
    
Var is B
    
Var is C
    

      Var is something else
    

可以发现 Var is something else 的判断逻辑，会随着 myVar 可选值的新增，变得越来越复杂。遇到这种情景，我们可以使用 ngSwitch 指令。

    
Var is A
    
Var is B
    
Var is C
    
Var is something else

NgStyle

NgStyle 让我们可以方便得通过 Angular 表达式，设置 DOM 元素的 CSS 属性。

• 设置元素的背景颜色

  Use fixed yellow background
 

• 设置元素的字体大小

   
      red text
   

NgStyle 支持通过键值对的形式设置 DOM 元素的样式：

   Uses fixed white text on blue background

注意到 background-color 需要使用单引号，而 color 不需要。这其中的原因是，ng-style 要求的参数是一个 Javascript 对象，color 是一个有效的 key，而 background-color 不是一个有效的 key ，所以需要添加 ''。

NgClass

NgClass 接收一个对象字面量，对象的 key 是 CSS class 的名称，value 的值是 truthy/falsy 的值，表示是否应用该样式。

• CSS Class

.bordered {
    border: 1px dashed black; background-color: #eee;
}

• HTML

This is never bordered
This is always bordered



   Using object literal. Border {{ isBordered ? "ON" : "OFF" }}




   Class names contains dashes must use single quote

This will always have a blue background and round corners

NgFor

NgFor 指令用来根据集合(数组) ，创建 DOM 元素，类似于 ng1 中 ng-repeat 指令

 
  
{{ num+1 }} - {{ c }}

使用 trackBy 提高列表的性能

@Component({
  selector: 'my-app',
  template: `
    

      
{{item.id}}
    
    Refresh items
  `,
})
export class App {

  constructor() {
    this.collection = [{id: 1}, {id: 2}, {id: 3}];
  }

  getItems() {
    this.collection = this.getItemsFromServer();
  }

  getItemsFromServer() {
    return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
  }

  trackByFn(index, item) {
    return index; // or item.id
  }
}

NgNonBindable

ngNonBindable 指令用于告诉 Angular 编译器，无需编译页面中某个特定的HTML代码片段。

    {{ content }}
    
      ← This is what {{ content }} rendered
    

Angular 4.x 新特性

If...Else Template Conditions

语法

使用示例

  
You are not allowed to see our secret


  Our secret is being happy