【2019-11-20】組件簡介

組件控制屏幕上被稱爲視圖的一片區域

組件的元數據

 

 

 selector --是一個CSS選擇器，它會告訴Angular,一旦在模板HTML中找到了這個選擇器對應的標籤，就建立並插入該組件的一個實例。

templateUrl -- 該組件的HTML模板文件相對於這個組件文件的地址。另外，你還能夠用template屬性的值來提供內聯的HTML模板。這個模板定義Lee該組件的宿主視圖

providers -- 當前組件所需的服務提供商的一個數組

模板與視圖

你要經過組件的配套模板來定義其視圖。模板就是一種HTML，它會告訴Angular如何渲染該組件

模板語法

數據綁定來協調應用和DOM中的數據

管道在顯示出來以前對其進行轉換

指令把程序邏輯應用到要顯示的內容上

一、數據綁定：單向和雙向綁定

①組件到DOM   {{hero.name}}

②組件到組件 <app-hero-detail [hero]="selectedHero"></app-hero-detail> 

將父組件的selectedHero傳給子組件的hero屬性

③DOM到組件   <li (click)="selectHero(hero)"></li>

④雙向綁定  <input [(ngModel)]="hero.name">

顯示把屬性值從組件傳到DOM，而後用戶修改後，將DOM中的新值經過事件綁定傳到組件

二、管道

 

 

 

 

today is Nov 20, 2019

 

 

 

 

 today is Wednesday, November 20, 2019

 

 

 today is 10:50 AM

三、指令

Angular的模板是動態的。當Angular渲染它們的時候，會根據指令給出的只是對DOM進行轉換。指令就是一個帶@Directive()裝飾器的類

組件從技術角度也是一種指令

除組件外，還有兩種指令：結構型指令和屬性型指令

指令的元數據把它裝飾的指令類和一個selector關聯起來，selector用來把指令插入到HTML中。在模板中，指令一般做爲屬性出如今元素標籤上，可能僅僅做爲名字出現，也可能做爲賦值目標或者綁定目標出現

①結構型指令

經過添加、移除或替換DOM元素來修改佈局

 

 

 *ngFor -- 是一個迭代器，他要求Angular爲heroes列表中的每一個英雄渲染一個<li>

*ngIf -- 是個條件語句，只有當選中的英雄存在時，他纔會包含HeroDetail組件

②屬性型指令

會修改現有元素的外觀或行爲。在模板中，它們看起來就像普通的HTML屬性同樣，所以得名「屬性型指令」

 

 

 ngModule指令就是一個屬性型指令，它實現了雙向數據綁定。

ngModule修改現有元素，通常是input的行爲；設置其顯示屬性值，並響應change事件

Angular還有不少預約義指令，既不修改佈局結構(eg : ngSwitch),也不修改DOM元素和組件的樣子(ngStyle 和ngClass)