Angular 内置指令

ngIf

根据一个条件（表达式）来决定显示或隐藏一个元素

如果表达式的结果返回一个 假值 ，那么元素会从 DOM 上被移除

<div *ngIf="false"></div>           <!-- never display -->
<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

类似 switch 语句，对表达式进行一次求值，而后根据其结果来决定如何显示指令内的嵌套元素

一旦有了结果，可：

• 使用 ngSwitchCase 指令描述已知结果
• 使用 ngSwitchDefault 指令处理所有其他未知情况

如果用 ngIf 需要多次使用，如：

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

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

注意等号只有一个

也可为不同元素声明同样的 *ngSwitchCase 值，这样可以多次匹配同一个值

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

ngStyle

通过 Angular 表达式给特定的 DOM 元素设定 CSS属性

• 基础用法

<!-- [style.<cssproperty>]=value -->
<div [style.background-color]="'yellow'">yellow bg</div>
<!-- 使用 ngStyle 属性，使用键值对设置每个属性 -->
<div [ngStyle]="{color: 'red', 'background-color': 'blue'}">red text on blue bg</div>

background-color 使用单引号，因为 ngStyle 的参数是一个 JavaScript 对象，连字符不允许出现在对象的键名中，除非它是一个字符串，因此使用引号

• 使用动态值

<input type="text" name="color" value="{{color}}" #colorinput>
<input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
<button (click)="apply(colorinput.value, fontinput.value, colorinput)">Apply</button>

<div [ngStyle]="{color: color}">{{color}} text</div>
<div [style.background-color]="color" style="color: green;">{{color}} background</div>
<pre><code>{{colorinput.type}}</code></pre>

模板引用变量使用井号(#)来声明引用变量。

模板引用变量通常用来引用模板中的某个DOM元素，它可以引用Angular组件或指令或 Web Component。

我们可以在当前模板的任何地方使用模板引用变量。

ng06.png

export class AppComponent {
  color;
  fontSize;
  constructor() {
  }

  apply(color:string, fontSize:string, colorinput) {
      this.color = color;
      this.fontSize = fontSize;
      console.log(colorinput);
  }
}

ngClass

动态设置和改变一个给定DOM元素的CSS类

• {key:value} , key为类名，value为布尔值，表示该类是否启用

.bordered {
    border: 1px dashed black;
    background-color: #eee;
}
.bordered-box {
    border: 1px dashed black;
    background-color: #aaa;
}
.blue {
    background-color: blue;
}
.round {
    border-radius: 25px;
}

<div [ngClass]="{bordered: false}">This is nerver border</div>
<div [ngClass]="{bordered: true}">This is always border</div>
<!-- 使用包含连字符的类名要小心，JavaScript对象不允许字面量的键出现连字符。如确实需要，必须用字符串做键 -->
<div [ngClass]="{'bordered-box': true}">This is always border</div>

• 动态值

<div [ngClass]="{bordered: isBordered}">Using object literal Border {{ isBordered ? "ON" : "OFF"}}</div>
<div [ngClass]="classesObj.border">Using object var Border {{ classesObj.border ? "ON" : "OFF"}}</div>

isBordered = true;
classesObj =  {border : "bordered"};

• 类名列表

<div [ngClass]="['blue', 'round']">this will always have a blue background and round corners</div>
<div [ngClass]="classList">
    this is {{classList.indexOf('blue') > -1 ? "" : "NOT"}} blue 
    and {{classList.indexOf('round') > -1 ? "" : "NOT"}} round
</div>

classList = ['blue', 'round'];

ng07.png

ngFor

重复一个给定的DOM元素（或一组DOM元素），每次重复都会从数组中取一个不同的值

语法：*ngFor="let item of items"

1. let item 语法指定一个用来接收 items 数组中每个元素的（模板）变量
2. items 是来自组件控制器的一组项的集合

    cities = ['Miami', 'Sao Paulo', 'New York'];
    people = [
        { name: 'Anderson', age: 35, city: 'Sao Paluo' },
        { name: 'John', age: 12, city: 'Miami' },
        { name: 'Peter', age: 22, city: 'New York' }
    ];
    peopleByCity = [
        {
            city: 'Miami',
            people: [
                { name: 'John', age: 12 },
                { name: 'Angel', age: 22 }
            ]
        },
        {
            city: 'Sao Paulo',
            people: [
                { name: 'Anderson', age: 35 },
                { name: 'Felipe', age: 36 }
            ]
        }
    ];

<div class="ui list">
    <div *ngFor="let c of cities">{{ c }}</div>
</div>
<!-- 迭代一个对象数组 -->
<table class="ui celled table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr *ngFor="let p of people">
            <td>{{ p.name }}</td>
            <td>{{ p.age }}</td>
            <td>{{ p.city }}</td>
        </tr>
    </thead>
</table>
<!-- 嵌套数组, 为每个城市渲染一个表格 -->
<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>
<!-- 获取索引 -->
<div class="ui list">
    <div *ngFor="let c of cities let i = index">{{ i }} - {{ c }}</div>
</div>

ngNonBindable

告诉 Angular 不要编译或者绑定页面中的某个特殊部分时使用

    content = "Some text";

<div style="margin-bottom: 30px;">
    <span class="bordered">{{ content }}</span>
    <span ngNonBindable>&larr; This is what {{ content }} rendered</span>
</div>

ng08.png