Angular10教程--2.1 模版表示式與屬性繫結
阿新 • • 發佈:2021-01-17
這一節,我們主要講angular的模版表示式,以及屬性、class、style、事件的繫結~
原文閱讀
插值與模板表示式
所謂 “插值” ,就是指將表示式嵌入到標記文字中。 預設情況下,插值會用雙花括號 {{ }}
作為分隔符。(跟vue一致)
可以有如下幾種情況:
//src/app/app.component.ts
...
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
itemImageUrl = './image/1.png';
getVal (): number {
return 10;
}
}
//src/app/app.component.html
...
<!-- 直接使用 -->
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<!-- 呼叫方法 -->
<div>Value: {{ getVal() }}/div>
<!-- 用作運算-->
<p>The sum of 1 + 1 is {{1 + 1}}.</p>
<!-- 結合使用 -- >
<p>{{price * 0.7 + getVal()}}.</p>
<!-- 繫結屬性-->
<div><img src="{{itemImageUrl}}"></div>
當使用模板表示式時,請遵循下列指南:
- 最好是簡單的運算,以便程式碼能夠迅速執行;
- 不能使用那些具有或可能引發副作用的 JavaScript 表示式:
- 賦值(=, +=, -=, …))
- new、typeof、instanceof 等運算子
- 自增和自減運算子:++ 和 –
- 不支援位運算,比如 | 和 &
屬性繫結
屬性繫結形式大概有三種方式:
- 使用[]: [property]=“變數”
- 使用bind-: bind-src=“變數”
- 插值表示式:src="{{user.pic}}"
// src/app/app.component.ts
...
export class AppComponent {
picUrl = './image/1.png';
picAlt = 'pic goode';
pic = {
url: './image/1.png',
alt: 'pic goode'
};
isUnchanged: true;
customTitle: 'custom title';
}
// src/app/app.component.html
...
// 使用 []
<img [src]="picUrl" [alt]="picAlt" />
<button [disabled]="isUnchanged">Disabled Button</button>
/****************** 特別提示 start *********************/
// 這樣會報錯
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
// 正確寫法
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>
/****************** 特別提示 end **********************/
// 使用bind
<img bind-src="picUrl" bind-alt="picAlt" />
// 插值
<img src="{{ pic.url }}" alt="{{ pic.alt }}" />
// 繫結自定義屬性
<span [attr.data-title]="customTitle">some words</span>
<span [attr.title]="customTitle">title</span>
雖然上面三種方式都可以繫結,但是建議在專案中採取其中一種形式,保持程式碼的統一性也很重要哦~
class繫結
繫結單個class
語法:[class.ClassName]="boolean | undefined | null"
//src/app/app.component.ts
...
export class AppComponent {
theme = 'primary';
isSuccess = true;
}
//src/app/app.component.html
...
<div class="btn" [class.btn-primary]="theme === 'primary'">Primary</div>
<div class="btn" [class.btn-secondary]="true">secondary</div>
<div class="btn" [class.btn-success]="isSuccess">success</div>
<div class="btn" [class.btn-danger]="'啦啦啦'">danger</div>
<div class="btn" [class.btn-danger]="0">danger</div>
<div class="btn" [class.btn-danger]="undefined">danger</div>
繫結多個class
語法:[class]="classExpression"
// src/app/app.component.ts
...
export class AppComponent {
btnCls = 'btn btn-primary'; // 字串,空格分隔
btnCls2 = ['btn', 'btn-success'];
btnCls3 = {
btn: true,
'btn-info': true
};
}
// src/app/app.component.html
...
<div class="btn" [class]="btnCls">btnCls</div>
<div class="btn" [class]="btnCls2">btnCls2</div>
<div class="btn" [class]="btnCls3">btnCls3</div>
<!-- 也可以用內建指令ngClass -->
<div class="btn" [ngClass]="btnCls">btnCls</div>
<div class="btn" [ngClass]="btnCls2">btnCls2</div>
<div class="btn" [ngClass]="btnCls3">btnCls3</div>
屬性樣式
單一樣式繫結
語法: [style.width]="string | undefined | null"
// src/app/app.component.html
...
<p [style.color]="'#f60'">some words</p>
<p [style.height]="'50px'" [style.border]="'1px solid'">屬性值中帶單位px</p>
<p [style.height.px]="50" [style.border]="'1px solid'">單位px不在屬性值中</p>
多重樣式繫結
語法:[style]="styleExpression"
// src/app/app.component.ts
...
export class AppComponent {
style1 = 'width: 200px;height: 50px;text-align: center;border: 1px solid;';
style2 = {
width: '200px',
height: '50px',
'text-align': 'center',
border: '1px solid'
};
}
// src/app/app.component.html
...
<p [style]="style1">style1</p>
<p [style]="style2">style2</p>
/******提示:不能使用陣列形式的引數 style3 = ['width', '200px'];******/
- 某個類或樣式繫結越具體,它的優先順序就越高
- 繫結總是優先於靜態屬性
事件繫結
語法:
// src/app/app.component.ts
...
export class AppComponent {
onClick() {
console.log('onClick');
};
onClick2(event: MouseEvent) {
console.log('onClick', event.target);
};
}
// src/app/app.component.html
...
<!-- 不同於vue,這裡需要用()來呼叫函式 -->
<div (click)="onClick()">btn</div>
<!-- 這裡一定是$event,就是原生的事件物件-->
<div (click)="onClick2($event)">btn2</div>
<!-- 繫結方法的等號後面可以寫任意js程式碼-->
<div ((click)="$event.preventDefault();text = 'a';">btn2</div>
至此,我們常用的插值、模版表示式與繫結屬性介紹完畢,總的來說還算簡單,唯一需要注意的就是保持程式碼格式統一,不然顯得很亂。
還是老樣子,歡迎關注我的公眾號,公眾號會最先更新