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">

• 自动

1. 使用表单模块，导入import {FormsModule} from ‘@angular/forms’;

<p><input type="text" [(ngModel)]="msg" /></p>

2. 自定义组件属性

• 修改属性的同时触发属性修改事件

<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>