詳解Angular2中Input和Output用法及示例

2019-11-19 16:32:11

字體：大中小

來源：轉載

供稿：網友

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

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

Output相當于指令的方法綁定，子作用域觸發事件執行響應函數，而響應函數方法體則位于父作用域中，相當于將事件“輸出到”父作用域中，在父作用域中處理。

看個angular2示例吧，我們定義一個子組件，獲取父作用域的數組值并以列表形式顯示，然后當點擊子組件的元素時調用父組件的方法將該元素刪除。

//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事件并對其進行響應。

//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指令顯示。

當點擊每個元素的時候觸發了click事件，執行fireChildEvent函數，該函數要將元素的index值“輸出”到父組件中進行處理。

Output一般都是一個EventEmitter的實例，使用實例的emit方法將參數emit到父組件中，觸發父組件的childEvent事件。

然后父組件監聽到該事件的發生，執行對應的處理函數getChildEvent，刪除傳遞的元素索引指向的數據，同時，視圖更新。

實際效果：