Angular 4 常用指令

Angular 4 常用指令

NgIf

<div *ngIf="false"></div> <!-- never displayed -->
<div *ngIf="a > b"></div> <!-- displayed if a is more than b -->
<div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" -->
<div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->

NgSwitch

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

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
</div>

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

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar == 'C'">Var is C</div>
    <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">
      Var is something else
    </div>
</div>

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

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchCase="'A'">Var is A</div>
    <div *ngSwitchCase="'B'">Var is B</div>
    <div *ngSwitchCase="'C'">Var is C</div>
    <div *ngSwitchDefault>Var is something else</div>
</div>

NgStyle

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

设置元素的背景颜色

<div [style.background-color="'yellow'"]>
  Use fixed yellow background
</div>

设置元素的字体大小

<!-- 支持单位: px | em | %-->
<div>
   <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
      red text
   </span>
</div>

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

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
   Uses fixed white text on blue background
</div>

注意到 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

<!-- Use boolean value -->
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>
<!-- Use component instance property -->
<div [ngClass]="{bordered: isBordered}">
   Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>
<!-- Class names contains dashes -->
<div[ngClass]="{'bordered-box': false}">
   Class names contains dashes must use single quote
</div>
<!-- Use a list of class names -->
<div class="base" [ngClass]="['blue', 'round']"> 
  This will always have a blue background and round corners
</div>

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

<div class="ui list" *ngFor="let c of cities; let num = index"> 
  <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

使用 trackBy 提高列表的性能

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
    </ul>
    <button (click)="getItems()">Refresh items</button>
  `,
})
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代码片段

<div class='ngNonBindableDemo'>
    <span class="bordered">{{ content }}</span>
    <span class="pre" ngNonBindable>
      ← This is what {{ content }} rendered
    </span>
</div>

Angular 4.x 新特性

If...Else Template Conditions

语法

<element *ngIf="[condition expression]; else [else template]"></element>

使用示例

<ng-template #hidden> 
 <p>You are not allowed to see our secret</p>
</ng-template>
<p *ngIf="shown; else hidden"> 
 Our secret is being happy</p>

<template> —> <ng-template>

使用示例

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';
@Component({
  selector: 'exe-app',
  template: `
   <ng-template #fetching>
      <p>Fetching...</p>
   </ng-template>
   <p *ngIf="auth | async; else fetching; let user">
      {{user.username }}
   </p>
  `,
})
export class AppComponent implements OnInit {
  auth: Observable<{}>;
  ngOnInit() {
    this.auth = Observable
      .of({ username: 'semlinker', password: 'segmentfault' })
      .delay(new Date(Date.now() + 2000));
  }
}