www.hj8828.com 5

【www.hj8828.com】Angular4 中常用的通令入门总括_AngularJS_脚本之家

前言

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 -->

简介

内置指令是已经导入过的,你的组件可以直接使用它们。
因此,不用像你自己的组件一样把它们作为指令导入进来。

本文主要给大家介绍了关于Angular4
常用指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

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>

ngIf

根据一个条件来决定显示或隐藏一个元素, 可以使用 ngIf
指令。这个条件是由你传给指令的表达式的结果决定的

<div ngIf="false"></div> 
<div ngIf="a > b"></div> 
<div ngIf="str == 'yes'"></div> 
<div ngIf="myFunc()"></div> 

NgIf

NgStyle

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

  • 设置元素的背景颜色

<div [style.background-color="'yellow'"]>
  Use fixed yellow background
</div> 
  • 设置元素的字体大小

<!-- 支持单位: px | em | %-->
<div>

      red text

</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-colorwww.hj8828.com, 不是一个有效的
key ,所以需要添加 ''

ngSwitch

根据一个给定的条件来渲染不同的元素

// ngSwitchCase 指令描述已知结果;
// ngSwitchDefault 指令处理所有其他未知情况
// ngSwitchDefault 元素是可选的。如果我们不用它,
// 那么当 myVar 没有匹配到任何期望的值时就不会渲染任何东西
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="'A'">Var is A</div>
<div ngSwitchCase="'B'">Var is B</div>
<div ngSwitchDefault>Var is something else</div>
</div>

// 想要处理新值 C, 只需要插入一行
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="'A'">Var is A</div>
// 会渲染两次
<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>
  b">   

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>

ngStyle

使用 ngStyle 指令,可以通过 Angular 表达式给特定的 DOM 元素设定 CSS
属性。

// 简单用法
<div [style.background-color]="'yellow'">
Uses fixed yellow background
</div>

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

对 background-color 使用了单引号,但却没有对 color
使用。这是为什么呢?

因为 ngStyle 的参数是一个 JavaScript
对象,而color是一个合法的键,不需要引号。但是在 background-color
中,连字符是不允许出现在对象的键名当中的,除非它是一个字符串,
因此使用了引号。

// 设置文字大小
//1. style.font-size.px
//2. style.font-size.em
//3. style.font-size.%
<div>

red text

</div>

NgSwitch

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
  }
}

ngClass

ngClass指令在HTML模板中用ngClass属性来表示,让你能动态设置和改变一个给定DOM元素的CSS类

.bordered {
border: 1px dashed black;
background-color: #eee;
}
// 简单用法
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

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

NgNonBindable

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

<div class='ngNonBindableDemo'>
    {{ content }}

      ← This is what {{ content }} rendered

</div>

ngFor

重复一个给定的DOM元素(或一组DOM元素)
,每次重复都会从数组中取一个不同的值。

this.cities = ['Miami', 'Sao Paulo', 'New York'];

<h4 class="ui horizontal divider header">
Simple list of strings
</h4>
<div class="ui list" *ngFor="let c of cities">
<div class="item">{{ c }}</div>
</div>

www.hj8828.com 1

使用ngFor指令的结果

// 根据每一行数据渲染出一个表格
this.people = [
    { name: 'Anderson', age: 35, city: 'Sao Paulo' },
    { name: 'John', age: 12, city: 'Miami' },
    { name: 'Peter', age: 22, city: 'New York' }
];

<h4 class="ui horizontal divider header">
    List of objects
</h4>
<table class="ui celled table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tr *ngFor="let p of people">
        <td>{{ p.name }}</td>
        <td>{{ p.age }}</td>
        <td>{{ p.city }}</td>
    </tr>
</table>

www.hj8828.com 2

渲染对象数组

// 使用嵌套数组
this.peopleByCity = [
    {   city: 'Miami',
        people: [
            { name: 'John', age: 12 },
            { name: 'Angel', age: 22 }
        ]
    },
    {   city: 'Sao Paulo',
        people: [
            { name: 'Anderson', age: 35 },
            { name: 'Felipe', age: 36 }
        ]
    }
]

<h4 class="ui horizontal divider header">
    Nested data
</h4>
<div ngFor="let item of peopleByCity">
    <h2 class="ui header">{{ item.city }}</h2>
    <table class="ui celled table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tr ngFor="let p of item.people">
            <td>{{ p.name }}</td>
            <td>{{ p.age }}</td>
        </tr>
    </table>
</div>

www.hj8828.com 3

渲染嵌套数组

获取索引

在迭代数组时,我们可能也要获取每一项的索引。我们可以在ngFor指令的值中插入语法let
idx = index并用分号分隔开, 这样就可以获取索引了。

www.hj8828.com 4

使用索引

 Var is A Var is B Var is something else

Angular 4.x 新特性

ngNonBindable

不要编译或者绑定页面中的某个特殊部分时, 要使用ngNodBindable指令。

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

template: `
<div class='ngNonBindableDemo'>
{{ content }}
// 第二个 span 不编译

← This is what {{ content }} rendered

</div>
`

www.hj8828.com 5

使用ngNonBindable的结果

如果 myVar 的可选值多了一个 ‘C’,就得相应增加判断逻辑:

If…Else Template Conditions

总结

Angular的核心指令数量很少,但我们却能通过组合这些简单的指令来创建五花八门的应用

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

语法

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

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

使用示例

<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>
 Var is A Var is B Var is C Var is something else

<template> —> <ng-template>

NgStyle

使用示例

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));
  }
}

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

我有话说

1、设置元素的背景颜色

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

<div [hidden]="!showGreeting">
  Hello, there!
</div>

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

 Use fixed yellow background

直接使用 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 对象实例。

2、设置元素的字体大小

  red text 

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

 Uses fixed white text on blue background