如果你想要掌握angualr模版,那么你必须掌握以下知识:
1.对比各种js模版的引擎
2.Mustache(八字胡)语法
3.模版内的局部变量
4.属性绑定,事件绑定, 双向绑定
5.在模版里使用结构指令(‘ngif’,‘ngFor’,‘n'gswitch’)
6.在模版里使用属性指令(‘ngCLASS’'n'gSt'yle',‘n'g'M'odel’)
7.在模版里使用管道格式化数据
一。模版引擎
1.你不能在模版中使用new关键字
2.你不能在模版里使用= += -=这类表达式
3.不能使用++ --等运算符
4.不能使用位运算符
二。 Mustache语法
1.它可以获取到组件里定义的属性值。
2.它可以计算简单的运算, 加减取模
3,它可以获取方法的返回值
三。模版里的局部变量
当模版中出现重名的局部变量,会按照以下的顺序来处理
模板局部变量 > 指令中的同名变量 > 组件中的同名属性。
四 属性绑定
属性绑定是用方括号来定义的
<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;
在模板里面使用结构型指令
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<any>=[ {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。
管道
管道的一个典型作用是用来格式化数据,来一个最简单的例子:
{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}
public currentTime: Date = new Date();