Angularjs2 基础模板语法学习

首先，我们先弄清楚一些概念性的东西。

  • 属性型指令 和 结构型指令
    其实通过字面意思我们可以大致理解到：属性型就是会改变 DOM 元素的外观或行为。而结构型则是修改DOM结构，用来添加、移除或者维护元素。结构型指令会以*标记，比如：*ngIf、*ngFor。
    对照点例子方便理解下，比如在Angular1中的ng-class就是属性型指令，使用后会影响元素的外观。而ng-if则是结构型指令，可以操作元素的添加或者移除。

接下来，主要介绍下在开发中需要掌握的知识点：

  1. 插值表达式 {{表达式}}

    这个大家应该都不陌生吧，通俗的理解就是：HTML中的输出语句，可以将JS种的一些变量输出到HTML元素中。

    HTML模板
    1
    <h3>欢迎你, {{userName}}!</h3>

    我们假设在渲染时，userName = "Daniel"，那么将会呈现的结果为：

    HTML渲染结果
    1
    <h3>欢迎你, Daniel!</h3>

  2. NgIf *ngIf="表达式"

    NgIf指令可以使我们从DOM中去移除和添加元素，类似于Angular1的 ng-if="表达式" 或者 Vue中的 v-if。当NgIf指令的表达式结果为false时，则会从DOM中移除整个元素，如果作用在一个Angular组件上，则会销毁组件及其子组件。

    HTML模板
    1
    <h3 *ngIf="isActive">欢迎你, Angular!</h3>

    我们假设在渲染时，isActive = true，则会展现该元素，如果isActive = false，则会从DOM中移除该元素。

  3. NgFor *ngFor="遍历语句"

    NgFor指令可以对数据进行循环输出，常用于列表之类的场景，会重复渲染当前所作用的元素。类似于Angular1的 ng-repeat 或者 Vue中的 v-for。

    HTML模板
    1
    <div *ngFor="let item of list">{{item}}</div>

    我们假设在渲染时，list = ['苹果','橘子','香蕉']，那么将会呈现的结果为：

    HTML渲染结果
    1
    2
    3
    <div>苹果</div>
    <div>橘子</div>
    <div>香蕉</div>

  4. NgSwitch ngSwitch="表达式"、*ngSwitchCase、*ngSwitchDefault

    NgSwitch指令是一个属性型指令用来绑定一个表达式，NgSwitchCase、NgSwitchDefault是结构型指令主要用来控制DOM元素是否显示。NgSwitch和我们代码逻辑中的switch意义是一样的，都表示根据变量值来匹配相应的 case 来执行。正在Angular中，只会把匹配的元素加入到DOM中。

    HTML模板
    1
    2
    3
    4
    5
    6
    <div [ngSwitch] = "timeType">
        <div *ngSwitchCase="'凌晨'">夜已深了，早点休息哦！</div>
        <div *ngSwitchCase="'清晨'">一日之计在于晨！</div>
        <div *ngSwitchCase="'上午'">喝点水哦，坐久了要动动脖子哦！</div>
        <div *ngSwitchDefault>天天开心好心情！</div>
    </div>

    我们假设在渲染时，timeType='清晨'，那么将会呈现的结果为：

    HTML渲染结果
    1
    <div>一日之计在于晨！</div>

  5. NgClass [ngClass]="{key:value}"

    通过[class.类名] = "true|false"可以动态的添加或者删除某个class样式，如果是想进行一组class样式的设置，可以使用[ngClass]。
    [ngClass]需要绑定在一个key:value的对象上，key指定的是class类名，value则为 true(应用) 或者 **false(不应用)**。
    对应Angular1中的 ng-class使用方式。

    ngClass定义
    1
    2
    3
    4
    5
    this.currentClasses = {
        'saveable': this.canSave,
        'modified': this.isUnchanged,
        'special': this.isSpecial
    }
    ngClass使用
    1
    <div [ngClass]="currentClasses"></div>

  1. NgStyle [ngStyle]="{key:value}"

    通过[style.样式属性]="样式值"可以设置单一样式的值，如果选设置多个，可以使用[ngStyle]。
    [ngStyle]也是需要绑定一个key:value的对象上，key指定的是style的样式名，value则为样式的值。
    对应Angular1中的ng-style使用方式。

    ngStyle定义
    1
    2
    3
    4
    5
    this.currentStyles = {
        'font-style': this.canSave ? 'italic' : 'normal',
        'font-weight': this.isUnchanged ? 'bold' : 'normal',
        'font-size': this.isSpecial ? '24px' : '12px'
    }
    ngStyle使用
    1
    <div [ngStyle]="currentStyles"></div>

  2. 数据绑定汇总
    在Angularjs2中，数据绑定完全的换了一种书写方式，我们简单的列举下常用的绑定方式：

    Property绑定，主要针对的目标是：元素的 Property、组件的 Property、指令的 Property

    Property绑定
    1
    2
    3
    <img [src]="value">  <!-- 将img的src属性绑定到当前组件的value属性上 -->
    <hero-detail [hero]="currentHero"></hero-detail> <!-- 主要可用于父子组件间的通讯 -->
    <div [ngClass]="{'special': isSpecial}"></div> <!-- 和Angular1中的ng-class作用是一致的 -->

    事件绑定，主要针对的目标是：元素的事件、组件的事件、指令的事件

    事件绑定
    1
    2
    3
    <button (click)="onSave()">Save</button> <!-- 绑定按钮的 onClick 事件 -->
    <hero-detail (deleteRequest)="deleteHero()"></hero-detail> <!-- 将事件传递给组件事件 -->
    <div (myClick)="clicked=$event" clickable>Click me</div> <!-- 绑定自定义事件 -->

    双向绑定，事件以及Property通用

    双向绑定
    1
    <input [(ngModel)]="name"> <!-- 双向绑定，类似angular1中的 ng-model="name" -->

    Attribute绑定，主要针对的目标是：Attribute

    Attr属性绑定
    1
    <button [attr.data-label]="help"></button>

    Css类绑定，主要针对的目标是: class property

    css绑定
    1
    <div [class.special]="isSpecial">Special</div>

    样式绑定，主要针对的目标是：style property

    style绑定
    1
    <button [style.color]="isSpecial ? 'red' : 'green'"><button>