angular6.x系列的學習筆記記錄,仍在不斷完善中,學習地址:
系列目錄
(1)組件詳解之模板語法
(2)組件詳解之組件通訊
(3)內容投影, ViewChild和ContentChild
(4)指令
(5)路由
章節目錄
1插值語法和表達式
2在模板內部定義變量
3值綁定,事件綁定,雙向綁定
4內置結構型指令*ngIf,*ngFor,ngSwitch
5內置屬性型指令:NgClass,NgStyle
6管道與安全導航
7導入Bootstrap和fontawesome
Angular在模板引擎里面對這些最基本的東西做了很強的支持,所以它的模板表達能力是非常強的
1插值語法和表達式
類似前端模板引擎handlebars等的語法
能夠插入定義的變量,簡單的加減乘除等數學運算和調用方法
<p>定義的變量:{{str}}</p>
<p>簡單數學運算:1+1={{1+1}}</p>
<p>調用方法:{{getValue()}}</p>
2在模板內部定義變量
我們既可以在組件內部定義變量,也可以模板內部定義變量
通過#自動生成一個局部變量,給標簽命名,可以在組件內部和模板內部傳遞
<input #inputVal>
<p>{{inputVal.value}}</p>
<button class="btn btn-success" (click)="print(inputVal.value)">打印</button>
3值綁定,事件綁定,雙向綁定
值綁定
在模板內部,一些標簽的某些屬性不是固定的,會根據不同的情形變化,例如照片的src屬性,
我們可以通過值綁定(用[]表示),將它綁定到變量上,隨着變量值的改變而改變
事件綁定
在模板內部,某些操作會觸發事件,例如點擊按鈕
我們可以通過事件綁定(用()表示),將它綁定到指定事件上
<img [src]="imgSrc" />
<button (click)="changeImgSrc()">
將事件changeImgSrc()綁定到button上來,
修改imgSrc變量的值,改變img標簽通過值綁定的src屬性的值
</button>
雙向綁定
什么是雙向綁定呢?指的是界面的操作能實時反映到數據，數據的變更能實時展現到界面。
雙向綁定用[()]來表示,常見的雙向綁定有NgModel,它僅用於表單類元素上面
<input [(ngModel)]="str">
<p>{{str}}</p>
<button (click)="changeStr()"></button>
組件內部修改數據能夠實時反應到界面,界面上的修改也能實時傳遞到組件內部
4內置結構型指令*ngIf,*ngFor,ngSwitch:
*ngIf
在模板內部來判斷元素是否存在,它不是用display:none或者class=hide等顯示隱藏的方式,而是直接刪除,所以為真即存在,為假即刪除
它既可以是已經定義的變量,也可以是語句
<p *ngIf="1>=2">為false不顯示</p> <p *ngIf="isShow">變量控制是否顯示</p>
*ngFor
作用如其名,用於遍歷數組
<ul>
<li *ngFor="let item of arr;let i=index;">
{{i+1}}:{{item.value}}
</li>
</ul>
ngSwitch
神似其他語言里面的條件語句switch case,代碼如下
<span [ngSwitch]="num">
<span *ngSwitchCase="'1'">值為1</span>
<span *ngSwitchCase="'2'">值為2</span>
<span *ngSwitchCase="'3'">值為3</span>
<span *ngSwitchCase="'4'">值為4</span>
<span *ngSwitchCase="'5'">值為5</span>
<span *ngSwitchDefault>默認值10</span>
</span>
5內置屬性型指令:NgClass,NgStyle
NgClass和NgStyle都是用來通過代碼控制標簽樣式
NgClass
得先寫好樣式文件,通過代碼切換不同的樣式
<p [ngClass]="{'special':true}">用NgClass添加樣式類</p>
special是已經寫好的樣式類
NgStyle
不需要先寫好樣式文件,能夠細節的去處理樣式
<p [ngStyle]="{'color':1>2?'red':'blue'}">用NgStyle控制內聯樣式</p>
<div [ngStyle]="{'background-image': 'url('+x.ImgUrl+')','width':'100%','height':'120px','background-size':'cover'}">
6管道與安全導航
管道
當我們有數據需要做格式轉換的時候,管道是很好的選擇,因為它速度快,能復用
管道符號用|表示,例如x | y,把x作為參數傳到y中處理,當然可以 x | y | z,它能夠級聯使用
例如時間的處理
<p>{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}</p>
安全導航
很多時候我們在使用某個對象變量的時候,如果這個對象為null或者undefined,當我們直接點它下面的屬性,就會報錯
對於這種情況,常用的解決方法是三元操作,先判斷一下這個對象
相比於三元操作,有更加優秀的解決方法
<p>{{Obj?.value}}</p>
它會先判斷Obj,如果為null或者undefined,不會直接報錯
7 導入Bootstrap和fontawesome
首先在配置文件package.json dependencies下添加依賴的模塊
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
然后在src文件夾下的style文件里面添加
@import "~bootstrap/dist/css/bootstrap.min.css"; @import "~font-awesome/css/font-awesome.min.css";
這樣就可以在模板內部使用它們了
(終)
文檔信息
- 發表作者： 半路獨行
- 發表出處： 博客園
- 原文地址： https://www.cnblogs.com/banluduxing/p/9290208.html
- 版權信息：
本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。
感謝您的閱讀，如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕。本文歡迎各位轉載，但是轉載文章之后必須在文章頁面中給出作者和原文連接。