今天就跟大家聊聊有關(guān)Input和Output如何在Angular2中使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為五通橋等服務(wù)建站，五通橋等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為五通橋企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

對(duì)于angular2中的Input和Output可以和AngularJS中指令作類比。

Input相當(dāng)于指令的值綁定，無論是單向的(@)還是雙向的(=)。都是將父作用域的值“輸入”到子作用域中，然后子作用域進(jìn)行相關(guān)處理。

Output相當(dāng)于指令的方法綁定，子作用域觸發(fā)事件執(zhí)行響應(yīng)函數(shù)，而響應(yīng)函數(shù)方法體則位于父作用域中，相當(dāng)于將事件“輸出到”父作用域中，在父作用域中處理。

看個(gè)angular2示例吧，我們定義一個(gè)子組件，獲取父作用域的數(shù)組值并以列表形式顯示，然后當(dāng)點(diǎn)擊子組件的元素時(shí)調(diào)用父組件的方法將該元素刪除。

//app.component.html
<app-child [values]="data" (childEvent) = "getChildEvent($event)">
</app-child>

//app.component.ts
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 data = [1,2,3];

 getChildEvent(index){
  console.log(index);
  this.data.splice(index,1);
 }
}

以上是跟組件app-root的組件類及模板，可以我們把data輸入到子組件app-child中，然后接收childEvent事件并對(duì)其進(jìn)行響應(yīng)。

//app-child.component.html
<p *ngFor="let item of values; let i = index" (click)="fireChildEvent(i)">
 {{item}}
</p>


//app-child.component.ts
@Component({
 selector: 'app-child',
 templateUrl: './child.component.html',
 styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 @Input() values;
 @Output() childEvent = new EventEmitter<any>();
 constructor() { }

 ngOnInit() {

 }
 fireChildEvent(index){
  this.childEvent.emit(index);
 }
}

子組件定義了values接收了父組件的輸入，這里就是data值，然后使用ngFor指令顯示。

當(dāng)點(diǎn)擊每個(gè)元素的時(shí)候觸發(fā)了click事件，執(zhí)行fireChildEvent函數(shù)，該函數(shù)要將元素的index值“輸出”到父組件中進(jìn)行處理。

Output一般都是一個(gè)EventEmitter的實(shí)例，使用實(shí)例的emit方法將參數(shù)emit到父組件中，觸發(fā)父組件的childEvent事件。

然后父組件監(jiān)聽到該事件的發(fā)生，執(zhí)行對(duì)應(yīng)的處理函數(shù)getChildEvent，刪除傳遞的元素索引指向的數(shù)據(jù)，同時(shí)，視圖更新。

看完上述內(nèi)容，你們對(duì)Input和Output如何在Angular2中使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝大家的支持。

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

文章題目：Input和Output如何在Angular2中使用-創(chuàng)新互聯(lián)
新聞來源：http://jinyejixie.com/article32/hiisc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、做網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站策劃、Google、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)