angular 模板

文本插值

组件中的变量：{ {data}}
插值表达式：{ {1+1}} { {1+getVal()}} 新的模板表达式运算符，例如 |，?. 和 !

<img src="{
  {itemImageUrl}}">
<p>{
  {title}}</p>
<ul>
  <li *ngFor="let itemof list">{
  {item.name}}</li>
</ul>

//结果：Template <script>alert("evil never sleeps")</script> Syntax  浏览器不会处理HTML,而是原样显示它
<p>{
  {evilTitle}}</p>

public title:string = 'my-project';
public list:any[] = [{name:'jie'},{name:'lei}]
public evilTitle:string = 'Template <script>alert("evil never sleeps")</script> Syntax';

不能使用那些具有或可能引发副作用的 JavaScript 表达式，包括：

• 赋值 (=, +=, -=, …)
• 运算符，比如 new、typeof 或 instanceof 等。
• 使用 ; 或 , 串联起来的表达式
• 自增和自减运算符：++ 和 –
• 一些 ES2015+ 版本的运算符
• 不支持位运算，比如 | 和 &

属性绑定

Propety绑定

要绑定的属性将其括在方括号[]内，方括号 [] 使 Angular 将等号的右侧看作动态表达式进行求值。如果不使用方括号，等号右侧视为字符串字面量

• 可用于绑定标签自带的属性
• 绑定ngclass，改变class值
• 绑定innerHtml，属性绑定会对<script>标记进行忽略处理，不显示script标记及包裹的内容
• 在父子组件传值绑定值

<img [src]="itemImageUrl2">
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>
 
 //报错，不能绑定td自身不存在的属性
<tr><td [aa]="1 + 1">Three-Four</td></tr>

<button [disabled]="isUnchanged">Disabled Button</button>
<p [ngClass]="classes">blue</p> //class="aa bb"
<p [ngClass]="classstr">red</p>//class='red'

//结果忽略script标签及内容：Template  Syntax  
<p [innerHtml]='evilTitle'></p>



public classes:string[] = ['aa','bb']
public classstr:string = 'red'
public evilTitle:string = 'Template <script>alert("evil never sleeps")</script> Syntax';
  

Attribute绑定

在Attribute名称前加上前缀attr.

• 可设置自定义的属性

//结果：aa='2'
 <p [attr.aa]='1+1'>123</p>
 //结果：aria-label='1234'
 <button [attr.aria-label]="actionName"></button>
 

public actionName:string = '1234'

类绑定

绑定类型	语法	输入类型	范例输入值
单一类绑定	[class.sale]=“onSale”	boolean | undefined | null