angular 模板常用语法
1. 结构指令
1.1 条件
extport class AppComponent {
flag = true;
}<p *ngIf="flag">xxxx</p>
<p *ngIf="flag else temp1">xxxx</p>
<ng-template #temp1><p>yyyy</p></ng-template>1.2. 循环
extport class AppComponent {
list = ["item1","item2","item3"];
}<ul>
<li *ngFor="let item of list;let i=index">
{{i}} {{item}}
</li>
</ul>2. 数据绑定
- 文本绑定(插值绑定)
<p>{{msg}}</p>- HTML绑定(用于插入HTML)
<p [innerHTML]="msg"></p>- 对象属性绑定(DOM Property)
<img [src]="url">
<img bind-src="url">
<img src="{{url}}">- HTML属性绑定(HTML Attribute)
错误写法：
<tr><td colspan="{{ 1 + 1 }}">xxx</td></tr>报错：Can’t bind to ‘colspan’ since it isn’t a known property of ‘td’. 原因：clspan是HTML属性而不是DOM属性 正确写法：
<tr><td [attr.colspan]="1 + 1">xxx</td></tr>2.1. 事件绑定
extport class AppComponent {
showMsg(event) {
}
}<button (click)="flag=!flag">b1</button>
<button on-click="flag=!flag">b1</button>
<button (click)="msg=$event.target.innerHtml">b2</button>
<button (click)="handler($event)">b3</button>2.2. 样式绑定
extport class AppComponent {
cls = 'red';
redStyle = { color: 'red' };
}2.2.1 样式类绑定
.red {
color: red
}
.large {
font-size: 30px;
}- 直接绑定类名
<p [class]="red">red</p>- 根据表达式布尔值绑定指定类
<p [class.red]="flag">red</p>- 根据表达式动态绑定类
<p [ngClass]="{'red':flag, 'large':largeSize}">red</p>2.2.2 样式值绑定
<p [style.color]="flag?'red':'blue'">red</p>
<p [ngStyle]="redStyle">red</p>2.3. 双向绑定
- 手动
<input type="text" [value]="msg" (input)="msg=$event.target.value">- 自动
- 使用表单模块，导入import {FormsModule} from ‘@angular/forms’;
<p><input type="text" [(ngModel)]="msg" /></p>- 自定义组件属性
- 修改属性的同时触发属性修改事件
<p><input type="text" [value]="msg" (input)="msg=$event.target.value;this.msgChange.emit(msg);" /></p>- 按x,xChange的规范定义属性及事件
@Input() msg = 'msg';
@Output() msgChange = new EventEmitter<string>();- 通过[()]实现双向绑定
<myComponent [(msg)]="myComponentMsg"></myComponent>3. 标签引用
<input type="text" #field1 />
<input type="text" ref-field2 />
<button (click)="field2.value=field1.value">save</button>4. 管道
日期格式转换
<p>{{d|data:'yyyy-MM-dd'}}</p>对象转换json
<p>{{obj|json}}</p>数字格式转换’最小整数位数(自动补零).最小小数位数(自动补零)-最大小数位数’
<p>{{3.141592653|number:'3.3-10'}}</p>截取(字符串/数组)
<ul>
<li *ngFor="let i of collection | slice:1:3">{{i}}</li>
</ul>
<p>{{str | slice:0:4}}</p>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/05/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
