Angular6 學習筆記——組件詳解之模板語法

angular6.x系列的學習筆記記錄,仍在不斷完善中,學習地址:

https://www.angular.cn/guide/template-syntax

http://www.ngfans.net/topic/12/post/2

 

系列目錄

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

 這樣就能夠在模板內部使用它們了

 (終)

 

文檔信息

• 發表做者：  半路獨行
• 發表出處：  博客園
• 原文地址：  http://www.javashuo.com/article/p-czilefxh-gm.html
• 版權信息：本做品採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。

 

---

感謝您的閱讀，若是您以爲閱讀本文對您有幫助，請點一下「推薦」按鈕。本文歡迎各位轉載，可是轉載文章以後必須在文章頁面中給出做者和原文鏈接。