常用的模板指令-CSDN博客

插值绑定

Mustache 语法也就是你们说的双花括号语法{{...}}，老外觉得它像八字胡子，很奇怪啊，难道老外喜欢侧着头看东西？

关于 Mustache 语法，你需要掌握3点：

它可以获取到组件里面定义的属性值。
它可以自动计算简单的数学表达式，例如：加减乘除、取模。
它可以获得方法的返回值。
请依次看例子：

插值语法关键代码实例：

<h3>
    欢迎来到{{title}}！
</h3>
public title = '假的星际争霸2';

简单的数学表达式求值：

<h3>1+1={{1+1}}</h3>

调用组件里面定义的方法：

<h3>可以调用方法{{getVal()}}</h3>
public getVal():any{
    return 65535;
}

模板内的局部变量

<input #heroInput>
<p>{{heroInput.value}}</p>

有一些朋友会追问，如果我在模板里面定义的局部变量和组件内部的属性重名会怎么样呢？

如果真的出现了重名，Angular 会按照以下优先级来进行处理：

模板局部变量 > 指令中的同名变量 > 组件中的同名属性。
这种优先级规则和 JSP 里面的变量取值规则非常类似，对比一下很好理解对不对？你可以自己写代码测试一下。

属性绑定

属性绑定是用方括号来做的，写法：

<img [src]="imgSrc" />
public imgSrc:string="./assets/imgs/1.jpg";

很明显，这种绑定是单向的。

事件绑定

事件绑定是用圆括号来做的，写法：

<button class="btn btn-success" (click)="btnClick($event)">测试事件</button>
对应 Component 内部的方法定义：

public btnClick(event):void{
    alert("测试事件绑定！");
}

双向绑定

双向绑定是通过方括号里面套一个圆括号来做的，模板写法：
<font-resizer [(size)]="fontSizePx"></font-resizer>
对应组件内部的属性定义：

public fontSizePx:number=14;
AngularJS 是第一个把“双向数据绑定”这个特性带到前端来的框架，这也是 AngularJS 当年最受开发者追捧的特性，之一。

在模板里面使用结构型指令

Angular 有3个内置的结构型指令：ngIf、ngFor、ngSwitch。ngSwitch 的语法比较啰嗦，使用频率小一些。

*ngIf 代码实例：

<p *ngIf="isShow" style="background-color:#ff3300">显示还是不显示？</p>
<button class="btn btn-success" (click)="toggleShow()">控制显示隐藏</button>
public isShow:boolean=true;

public toggleShow():void{
    this.isShow=!this.isShow;
}

*ngFor 代码实例：

<li *ngFor="let race of races;let i=index;">
    {{i+1}}-{{race.name}}
</li>
public races:Array=[
    {name:"人族"},
    {name:"虫族"},
    {name:"神族"}
];

*ngSwitch 代码实例：

<div [ngSwitch]="mapStatus">
    <p *ngSwitchCase="0">下载中...</p>
    <p *ngSwitchCase="1">正在读取...</p>
    <p *ngSwitchDefault>系统繁忙...</p>
</div>
public mapStatus:number=1;

特别注意：一个 HTML 标签上只能同时使用一个结构型的指令。

因为“结构型”指令会修改 DOM 结构，如果在一个标签上使用多个结构型指令，大家都一起去修改 DOM 结构，到时候到底谁说了算？

那么需要在同一个 HTML 上使用多个结构型指令应该怎么办呢？有两个办法：

加一层空的 div 标签
加一层<ng-container>

在模板里面使用属性型指令

使用频率比较高的3个内置指令是：NgClass、NgStyle、NgModel。

NgClass 使用案例代码：

<div [ngClass]="currentClasses">同时批量设置多个样式</div>
<button class="btn btn-success" (click)="setCurrentClasses()">设置</button>
public currentClasses: {};

public canSave: boolean = true;
public isUnchanged: boolean = true;
public isSpecial: boolean = true;

setCurrentClasses() {
    this.currentClasses = {
        'saveable': this.canSave,
        'modified': this.isUnchanged,
        'special': this.isSpecial
    };
}
.saveable{
    font-size: 18px;
} 
.modified {
    font-weight: bold;
}
.special{
    background-color: #ff3300;
}

NgStyle 使用案例代码：

<div [ngStyle]="currentStyles">
    用NgStyle批量修改内联样式！
</div>
<button class="btn btn-success" (click)="setCurrentStyles()">设置</button>
public currentStyles: {}
public canSave:boolean=false;
public isUnchanged:boolean=false;
public isSpecial:boolean=false;

setCurrentStyles() {
    this.currentStyles = {
        'font-style':  this.canSave      ? 'italic' : 'normal',
        'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
        'font-size':   this.isSpecial    ? '36px'   : '12px'
    };
}

ngStyle 这种方式相当于在代码里面写 CSS 样式，比较丑陋，违反了注意点分离的原则，而且将来不太好修改，非常不建议这样写。

NgModel 使用案例代码：

<p class="text-danger">ngModel只能用在表单类的元素上面</p>
  <input [(ngModel)]="currentRace.name">
<p>{{currentRace.name}}</p>
public currentRace:any={name:"随机种族"};

请注意，如果你需要使用 NgModel 来进行双向数据绑定，必须要在对应的模块里面 import FormsModule。