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指令是一个属性型指令用来绑定一个表达式,NgSwitchCaseNgSwitchDefault结构型指令主要用来控制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>
  6. 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>
  7. 数据绑定汇总
    在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>