這篇文章主要為大家展示了“Angular2中組件交互的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular2中組件交互的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)專注于南召網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供南召營銷型網(wǎng)站建設(shè)，南召網(wǎng)站制作、南召網(wǎng)頁設(shè)計(jì)、南召網(wǎng)站官網(wǎng)定制、微信平臺小程序開發(fā)服務(wù)，打造南召網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供南召網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

1. 組件通信

我們知道Angular2應(yīng)用程序?qū)嶋H上是有很多父子組價(jià)組成的組件樹，因此，了解組件之間如何通信，特別是父子組件之間，對編寫Angular2應(yīng)用程序具有十分重要的意義，通常來講，組件之間的交互方式主要有如下幾種：

l 使用輸入型綁定，把數(shù)據(jù)從父組件傳到子組件

l 通過 setter 攔截輸入屬性值的變化

l 使用 ngOnChanges 攔截輸入屬性值的變化

l 父組件監(jiān)聽子組件的事件

l 父組件與子組件通過本地變量互動

l 父組件調(diào)用 ViewChild

l 父組件和子組件通過服務(wù)來通訊

本文會通過講解著幾種方式來對組件之間的通信做一個大致的介紹。

2. 輸入型綁定

輸入型綁定指的是利用模板語法中的屬性型綁定方式，將父組件的數(shù)據(jù)傳遞到子組件對應(yīng)的對象中，子組件中的對象一般使用@Input裝飾器來修飾，作為數(shù)據(jù)的接受者，例如

@Component({
selector: 'child',
template: 'I am fron {{input}}'
})
export class ChildComponent implements OnInit {
@Input()
input;
constructor() { }
ngOnInit() { }
}
@Component({
selector: 'parent',
template: ''
})
export class ParentComponent implements OnInit {
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
}

以上的例子我們可以看出，存在父子兩個組件，在父組件ParentComponent中的模板中引入了子組件，并將data數(shù)據(jù)通過屬性綁定的方式綁定到input屬性中傳入到子組件中，子組件中通過@Input()注解修飾input屬性來接收傳入的數(shù)據(jù)，并顯示在模板I am fron {{input}}中。

輸入型綁定是從父組件傳遞數(shù)據(jù)到子組件最常見的方式。

3. setter監(jiān)聽

我們知道，Angular2是一個MVVM的框架，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)能夠同步顯示到模板視圖中，可以使用一個輸入屬性的 setter 函數(shù)，以攔截父組件中值的變化，并采取行動。例如，我們改造上面的例子，子組件中使用set，get重寫對應(yīng)的綁定input屬性，當(dāng)輸入值方式變化時(shí)輸出一個控制臺信息。

@Component({
selector: 'child',
template: 'I am fron {{data}}'
})
export class ChildComponent implements OnInit {
_input:string;
@Input()
public set input(v : string) {
this._input = v;
console.log(v);
}
public get input() : string {
return this._input;
}
constructor() { }
ngOnInit() { }
}

4. ngOnChanges

除了上面說的setter函數(shù)可以響應(yīng)輸入數(shù)據(jù)的變化外，Angular2還提供了一個生命周期函數(shù)ngOnChanges 可以監(jiān)聽數(shù)據(jù)的變化。使用 OnChanges 生命周期鉤子接口的 ngOnChanges 方法來監(jiān)測輸入屬性值的變化并做出回應(yīng)。我們改造以上的子組件來響應(yīng)對應(yīng)的變化，在這個示例中，我們監(jiān)聽了輸入數(shù)據(jù)的變化，采取的對應(yīng)動作僅僅是輸出對應(yīng)的信息，當(dāng)然你也可以做很多其他的事情。

@Component({
selector: 'child',
template: 'I am fron {{data}}'
})
export class ChildComponent implements OnInit, OnChanges {
_input: string;
@Input()
public set input(v: string) {
this._input = v;
console.log(v);
}
public get input(): string {
return this._input;
}
constructor() { }
ngOnInit() { }
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}

5. 事件傳播

上面的集中方式都是父組件如何向子組件傳遞數(shù)據(jù)以及子組件如何監(jiān)聽數(shù)據(jù)的變化，事件傳播則是子組件如何向父組件通信的一種方式。子組件暴露一個 EventEmitter 屬性，當(dāng)事件發(fā)生時(shí)，子組件利用該屬性 emits( 向上彈射 ) 事件。父組件綁定到這個事件屬性，并在事件發(fā)生時(shí)作出回應(yīng)。子組件的 EventEmitter 屬性是一個 輸出屬性 ，通常帶有 @Output 裝飾器 。

@Component({
selector: 'child',
template: `
I am fron {{data}}
click for out
`
})
export class ChildComponent implements OnInit, OnChanges {
_input: string;
@Input()
public set input(v: string) {
this._input = v;
console.log(v);
}
public get input(): string {
return this._input;
}
@Output()
output:EventEmitter = new EventEmitter();
click(){
this.output.emit("i am from child");
}
constructor() { }
ngOnInit() { }
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}
@Component({
selector: 'parent',
template: ''
})
export class ParentComponent implements OnInit {
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
output($event){
console.log($event);
}
}

在上面的例子中，我們在子組件ChildComponent添加了一個向外傳播的事件output:EventEmitter = new EventEmitter>()，并添加了一個點(diǎn)擊的按鈕，當(dāng)按鈕事件觸發(fā)時(shí)，就會調(diào)用output事件向父組件傳遞事件，并將數(shù)據(jù)作為參數(shù)傳遞到父組件ParentComponent中，同時(shí)在父組件ParentComponent的模板中可以看到，我們使用模板語法中的事件綁定，綁定了output函數(shù)作為對應(yīng)事件的接受函數(shù)，當(dāng)子組件output事件觸發(fā)是，父組件的函數(shù)就會得到執(zhí)行。

使用事件傳播來進(jìn)行子組件對父組件之間的通信是最常見的方式。

6. 本地變量

在模板語法中，我們知道存在著本地變量這種語法，可以使用本地變量來代表對應(yīng)的組件。雖然父組件不能使用數(shù)據(jù)綁定來讀取子組件的屬性或調(diào)用子組件的方法。但可以在父組件模板里，新建一個本地變量來代表子組件，然后利用這個變量來讀取子組件的屬性和調(diào)用子組件的方法，不過這種使用方式只能在模板中使用，例如如下所示，改寫上面例子中的父組件模板，代碼如下。

我們在ParentComponent組件中使用本地變量#child獲取了child組件的實(shí)例，這樣就可以在模板中使用其屬性或者方法，例如child.input。

@Component({
selector: 'parent',
template: '{{child.input}}'
})
export class ParentComponent implements OnInit {
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
output($event){
console.log($event);
}
}

7. ViewChild

本地變量的方式是在父組件的模板中獲取子組件的實(shí)例，有木有其他方式可以在組件的類中獲取子組件的實(shí)例呢？答案是肯定的，如果父組件的類需要讀取子組件的屬性值或調(diào)用子組件的方法，就不能使用本地變量方法。當(dāng)父組件類 需要這種訪問時(shí)，可以把子組件作為ViewChild，注入到父組件里面。例如，我們改造上面的父組件的組件類，使用ViewChild來獲取子組件的實(shí)例，代碼如下：

@Component({
selector: 'parent',
template: '{{child.input}}'
})
export class ParentComponent implements OnInit {
@ViewChild(ChildComponent)
private childComponent: ChildComponent;
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
output($event) {
console.log($event);
}
}

在以上的代碼中，我們使用@ViewChild(ChildComponent)注解的形式獲取了對應(yīng)子組件childComponent的實(shí)例，這樣在父組件類中就可以調(diào)用子組件對應(yīng)的屬性及方法了。

相對于本地變量的方式而言，ViewChild的方式更加靈活，用途也比較廣泛。但是，需要注意的一點(diǎn)是，必須等待父組件的視圖顯示完成后才可以使用，因此，ngAfterViewInit 生命周期鉤子是非常重要的一步。

8. 服務(wù)方式

通過服務(wù)依賴注入的方式，我們可以了解到，服務(wù)在父子組件之間是可以共享的，因此，我們可以利用共享的服務(wù)的形式在父子組件之間進(jìn)行通信。

如果我們將服務(wù)實(shí)例的作用域被限制在父組件和其子組件內(nèi)，這個組件子樹之外的組件將無法訪問該服務(wù)或者與它們通訊。

一般來說，父子之間使用服務(wù)的方式來通行，是采用事件消息的形式來實(shí)現(xiàn)的。

例如，如下的代碼中，父子組件中共享了Service服務(wù)，并在各自的類中獲取了Service服務(wù)的實(shí)例，當(dāng)分別點(diǎn)擊父子組件中的按鈕時(shí)，就能夠觸發(fā)Service服務(wù)中的對應(yīng)的input$以及output$，因?yàn)榉?wù)是共享的，所以在父子組件中監(jiān)聽對應(yīng)的服務(wù)信息，就能夠得到傳遞的消息。

@Injectable()
export class Service {
input$: EventEmitter = new EventEmitter();
output$: EventEmitter = new EventEmitter();
constructor() {
}
}
@Component({
selector: 'child',
template: `
click for output
`
})
export class ChildComponent {
constructor(private _service: Service) {
this._service.input$.subscribe(function (input: string) {
console.log(input);
})
}
click() {
this._service.output$.emit('i am from child');
}
}
@Component({
selector: 'parent',
template: 'click for input',
providers: [Service]
})
export class ParentComponent {
constructor(private _service: Service) {
this._service.output$.subscribe(function (output: string) {
console.log(output);
})
}
click() {
this._service.input$.emit('i am from child');
}
}

以上是“Angular2中組件交互的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。


當(dāng)前文章：Angular2中組件交互的示例分析-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/dsoiii.html