Angular4之常用指令

Angular4指令

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 ，所以需要添加 ''。

@Directive({selector: '[ngStyle]'})

export class NgStyle implements DoCheck {

  private _ngStyle: {[key: string]: string};

  private _differ: KeyValueDiffer<string, string|number>;

  constructor(

    private _differs: KeyValueDiffers,

    private _ngEl: ElementRef,

    private _renderer: Renderer) {}

  @Input()

  set ngStyle(v: {[key: string]: string}) {

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

    this._ngStyle = v;

    if (!this._differ && v) {

      this._differ = this._differs.find(v).create();

    }

  }

  // 设置元素的样式

  private _setStyle(nameAndUnit: string, value: string|number): void {

    const [name, unit] = nameAndUnit.split('.'); // 截取样式名和单位

    value = value != null && unit ? `${value}${unit}` : value;

    this._renderer.setElementStyle(this._ngEl.nativeElement, name, value as string);

  }

}

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

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>

      &larr; This is what {{ content }} rendered

    </span>

</div>

Angular4.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));

  }

}

NOTE：

使用[hidden]属性控制元素可见性存在的问题

<div [hidden]="!showGreeting">

  Hello, there!

</div>

上面的代码在通常情况下，都能正常工作。但当在对应的DOM元素位置上设置display:flex属性时，尽管[hidden]对应的表达式true，但元素却能正常显示。对于这种特殊情况，则推荐使用*ngIf。

直接使用 DOM API 获取页面上的元素存在的问题

@Component({

  selector: 'my-comp',

  template: `

    <input type="text" />

    <div> Some other content </div>

  `

})

export class MyComp {

  constructor(el: ElementRef) {

    el.nativeElement.querySelector('input').focus();

  }

}

以上的代码直接通过 querySelector() 获取页面中的元素，通常不推荐使用这种方式。更好的方案是使用 @ViewChild 和模板变量，具体示例如下：

@Component({

  selector: 'my-comp',

  template: `

    <input #myInput type="text" />

    <div> Some other content </div>

  `

})

export class MyComp implements AfterViewInit {

  @ViewChild('myInput') input: ElementRef;

  constructor(private renderer: Renderer) {}

  ngAfterViewInit() {

    this.renderer.invokeElementMethod(

        this.input.nativeElement, 'focus');

    }

}

另外值得注意的是，@ViewChild() 属性装饰器，还支持设置返回对象的类型，具体使用方式如下：

@ViewChild('myInput') myInput1: ElementRef;

@ViewChild('myInput', {read: ViewContainerRef}) myInput2: ViewContainerRef;

若未设置 read 属性，则默认返回的是 ElementRef 对象实例。

巴特西