爲什麼在此代碼示例中需要@Output EventEmitter？

我目前正在閱讀關於Angular 2中的雙向數據綁定和閱讀本文。爲什麼在此代碼示例中需要@Output EventEmitter？

https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html

在本文中，存在具有@input和@Output其允許組件內部的值被結合到其父的變量的子組件。

export class CustomCounterComponent { 

    counterValue = 0; 
    @Output() counterChange = new EventEmitter(); 

    @Input() 
    get counter() { 
    return this.counterValue; 
    } 

    set counter(val) { 
    this.counterValue = val; 
    this.counterChange.emit(this.counterValue); 
    } 

    decrement() { 
    this.counter--; 
    } 

    increment() { 
    this.counter++; 
    } 
}

父HTML

<custom-counter [(counter)]="counterValue"></custom-counter> 
<p><code>counterValue = {{counterValue}}</code></p>

所以對我來說，我理解爲什麼需要@input - 但是我不明白的@Output counterChange是如何工作的，因爲它甚至沒有被任何東西認購父母。然而，它有必要在那裏，也有它叫counterChange爲了工作。

文章的作者說

，我們需要做的下一件事，就是與引入@Output（）事件相同的名稱，加上後綴更改。只要計數器屬性的值發生變化，我們就會發出該事件，。讓我們在二傳手攔截器添加 @Output（）屬性和發出的最新值：

爲什麼我們需要有相同的名字加上後綴的變化？這是某種我不知道的Angular約定嗎？我只是想弄清楚我錯過了哪個基本概念，所以我可以理解這是如何工作的。

我有一個在這裏的代碼的笨蛋，如果它會幫助。

https://plnkr.co/edit/BubXFDQ59ipxEdnEHWiG?p=preview

來源

2017-02-02 Diskdrive

的@Output（）裝飾使counterChange EventEmitter在角度事件語法中使用 - (event name)="function()"。

在這種情況下，你會發現什麼讓你失望的[(counter)]語法（稱爲'盒子裏的香蕉'）到[counter]="..." (counterChange)="..."的能力。換句話說，Angular會在看到[（property name）]語法時將後綴*Change附加到屬性綁定值。我希望這回答第一個問題。

至於爲什麼我們需要同名加change後綴？，這是一個有助於利用'盒裝香蕉'語法的Angular約定。

強烈推薦這個博客貼子，詳細解釋了角模板語法：

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#4930

來源

2017-02-02 13:39:02

謝謝。該文章澄清了很多事情 – Diskdrive

我很樂意提供幫助 –

爲什麼在此代碼示例中需要@Output EventEmitter？

回答

相關問題