Angular是基于組件化的開發(fā)模式的框架，一般把業(yè)務(wù)界面按照業(yè)務(wù)或功能來劃分為多個(gè)組件丽柿。
【組件】
1.組件與父子組件
2.父組件將數(shù)據(jù)向下傳遞給子組件
3.子組件觸發(fā)事件向上傳遞到父組件
4.ViewChild與ViewChildren的用法
5.<ng-content>模板標(biāo)簽的用法
6.組件的生命周期
【1.組件與父子組件】
組件是用戶界面的構(gòu)建單元滋早。Angular應(yīng)用程序始終會(huì)具有應(yīng)用程序組件（或根組件）妇垢。除根組件外，一般其他組件都是被做為HTML上的一個(gè)標(biāo)記被引入到父組件中來剔蹋。這種組件就可以包含其他組件平道，Angular應(yīng)用程序中寞宫，組件可以包含其他子組件。
編寫單頁(yè)面應(yīng)用程序時(shí)崇摄，此應(yīng)用默認(rèn)會(huì)具備組件的層次結(jié)構(gòu)擎值。圖1就是一個(gè)具有層次結(jié)構(gòu)組件的應(yīng)用架構(gòu)
【2.父組件將數(shù)據(jù)向下傳遞給子組件】
（1）在子組件中導(dǎo)入Input類，并在子組件類中使用@Input()注解符申明或示例化一個(gè)對(duì)象
（2）在父組件中的模板中引入子組件逐抑，并在子組件的屬性中加入[子組件中用@Input定義好的對(duì)象名稱],其屬性值是以表達(dá)式來解析鸠儿，可以是一個(gè)對(duì)象的引用，也可以是基本數(shù)據(jù)類型值
【3.子組件觸發(fā)事件向上傳遞到父組件】
（1）在子組件中導(dǎo)入Output類和EventEmitter類厕氨，并在子組件類中使用@Output()注解符申明或示例化一個(gè)EventEmitter類型的對(duì)象
（2）在子組件的模板對(duì)應(yīng)的事件觸發(fā)方法內(nèi)部執(zhí)行EventEmitter類型的對(duì)象的emit方法
（3）在父組件中的模板中引入子組件进每，并在子組件的屬性中加入(子組件中用@Output()t定義好的對(duì)象名稱)其屬性值是一個(gè)父組件內(nèi)部的方法，從而達(dá)到從子組件觸發(fā)事件向上傳遞到父組件
代碼如下：
父組件中的部分代碼：
<app-customer *ngFor="let customer of customerList"
[customer]="customer" (clicked)="onCustomerClicked($event)">
</app-customer>
onCustomerClicked(customerName: String) {
? ? alert('Customer Clicked:' + customerName);
? }
子組件中的部分代碼：
<div class='customer' (click)="onClicked()">
? {{customer.name}} | {{customer.city}}
? </div>
?@Input() customer: ICustomer ;
?@Output() clicked: EventEmitter<String> = new EventEmitter<String>();
? onClicked() {
? ? this.clicked.emit(this.customer.name);
? }
【4.ViewChild與ViewChildren的用法】
ViewChild與ViewChildren是用在父組件中的命斧，來獲取子組件對(duì)象實(shí)體品追，進(jìn)行可以調(diào)用子組件中的方法。
ViewChild是對(duì)單個(gè)子組件來說的冯丙。用于聲明某個(gè)子組件的引用
ViewChildren是用于聲明多個(gè)子組件的一個(gè)引用
兩者在括號(hào)內(nèi)指定一個(gè)選擇器，將子元素綁定到引用示例對(duì)象上遭京。
代碼如下：
import { Component, ElementRef, ViewChild, AfterViewInit } from
'@angular/core';
@Component({
selector: 'app-root',
template: `
<h1 #title></h1>
The title is {{title.innerHTML}}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('title') title: ElementRef;
ngAfterViewInit(){
this.title.nativeElement.innerHTML = 'app works differently!'
}
}
import { Component, ViewChildren, AfterViewInit } from
'@angular/core';
@Component({
selector: 'app-root',
template: `
<p #paragraph1>Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam
voluptua. </p>
<p #paragraph2>At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.</p>
<p *ngIf="note">{{note}}</p>
`,
styles: ['p { background-color: #FFE5CC; padding: 15px;
text-align: center}']
})
export class AppComponent implements AfterViewInit{
@ViewChildren('paragraph1, paragraph2') paragraphs;
note: string = '';
ngAfterViewInit(){
setTimeout(_ => this.note = 'Number of Paragraphs:' +
this.paragraphs.length);
}
}
【5.<ng-content>模板標(biāo)簽的用法】
舉個(gè)例子：在A組件的模板中使用<ng-content>標(biāo)簽胃惜，在B組件的模板中使用A組件標(biāo)簽，則A組件標(biāo)簽內(nèi)部的內(nèi)容直接替換掉<ng-content>標(biāo)簽
<ng-content>可以使外部組件內(nèi)容投射到內(nèi)部組件中哪雕，即投射到<ng-content>標(biāo)簽處并替換它船殉，可以把<ng-content>理解為占位符，當(dāng)一個(gè)組件使用<ng-content>標(biāo)簽時(shí)斯嚎，此標(biāo)簽的位置暫時(shí)保留著利虫，等待著使用此組件的父組件填充內(nèi)容。
使用場(chǎng)景：一般使用在子組件中堡僻，父組件為其投射內(nèi)容糠惫。
這樣做的好處：有時(shí)候子組件中的內(nèi)容不固定，是由外部因素決定的钉疫，即由使用者(父組件)決定的硼讽，留著空位，方便使用者自定義牲阁，使父組件與子組件解耦更抽象化子組件方便父組件的擴(kuò)展固阁，也可復(fù)用子組件壤躲。
也可以使用父組件向下傳遞數(shù)據(jù)給子組件實(shí)現(xiàn)相同的功能。
這里有幾種情況：
（1）子組件中只有一個(gè)<ng-content>
即<ng-content>保留位置被父組件內(nèi)部全部?jī)?nèi)容替換
（2）子組件中有多個(gè)<ng-content>
當(dāng)子組件內(nèi)部有多個(gè)<ng-content>時(shí)备燃，如果每個(gè)<ng-content>無法區(qū)分時(shí)碉克，則只有最后一個(gè)<ng-content>會(huì)被父組件內(nèi)部全部?jī)?nèi)容替換，如果每個(gè)<ng-content>可以區(qū)分并齐，即在<ng-content>內(nèi)部加入select屬性漏麦，那么父組件內(nèi)部的直接子節(jié)點(diǎn)會(huì)以select屬性值來命名子節(jié)點(diǎn)標(biāo)簽名或者內(nèi)部屬性及屬性值，來一一對(duì)應(yīng)填充替換對(duì)應(yīng)<ng-content>標(biāo)簽冀膝。
（3）如果在(2)的情況下唁奢，父組件內(nèi)部使用select屬性值的標(biāo)簽不是其直接子節(jié)點(diǎn)，則需要用到ngProjectAs屬性窝剖，此屬性則必須用在直接子節(jié)點(diǎn)上麻掸，ngProjectAs其屬性值為select屬性值或者標(biāo)簽名。
參考：http://www.cnblogs.com/laixiangran/p/8723166.html
【6.組件的生命周期】
Angular每個(gè)組件都存在一個(gè)生命周期赐纱，從創(chuàng)建脊奋，變更到銷毀。Angular提供組件生命周期鉤子疙描，把這些關(guān)鍵時(shí)刻暴露出來诚隙，賦予在這些關(guān)鍵結(jié)點(diǎn)和組件進(jìn)行交互的能力，掌握生命周期起胰，可以讓我們更好的開發(fā)Angular應(yīng)用
基于指令與組件的區(qū)別來分類:
（1）久又、指令與組件共有的鉤子：
ngOnChanges
ngOnInit
ngDoCheck
ngOnDestroy
（2）、組件特有的鉤子
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
生命周期鉤子的作用及調(diào)用順序
（1）效五、ngOnChanges - 當(dāng)數(shù)據(jù)綁定輸入屬性的值發(fā)生變化時(shí)調(diào)用
（2）地消、ngOnInit - 在第一次 ngOnChanges 后調(diào)用
（3）、ngDoCheck - 自定義的方法畏妖，用于檢測(cè)和處理值的改變
（4）脉执、ngAfterContentInit - 在組件內(nèi)容初始化之后調(diào)用
（5）、ngAfterContentChecked - 組件每次檢查內(nèi)容時(shí)調(diào)用
（6）戒劫、ngAfterViewInit - 組件相應(yīng)的視圖初始化之后調(diào)用
（7）半夷、ngAfterViewChecked - 組件每次檢查視圖時(shí)調(diào)用
（8）、ngOnDestroy - 指令銷毀前調(diào)用
更詳細(xì)的講解可以直接看http://www.reibang.com/p/a2f1d54097f8
