@Input雙向綁定

我正在嘗試在Angular 2.0中構建一個非常簡單的組件，稱爲<my-select>的自定義下拉列表。@Input雙向綁定

我將model轉換爲<my-select>，我期望在最終用戶從下拉列表中選擇一個選項時更新它。

Plunker：http://plnkr.co/edit/iY1hG0q9rsgrR6ltKXW4?p=preview

我們可以從Plunker看到的，只有model對象本地<my-select>正在更新，而不是model對象，我從<app>傳遞英寸我在這裏錯過了什麼？雙向如何綁定到自定義組件？

在Angular 1.x中，這與使用=將變量傳遞到directive的$scope一樣簡單。

2015-12-28 lux

在你MySelect你需要的輸出

@Output() modelChange:EventEmitter = new EventEmitter();

，然後你通知關於改變的值由modelChange.next(newValue)父母;

又見Angular2: Passing values up from a component

來源

2015-12-28 18:18:41

This Works。詳盡而不直觀，但它的工作原理。你有什麼背景知道爲什麼它是這樣設計的？ Angular 1.x處理得更加優雅，代碼少90％。 – lux

這是React風格，使雙向綁定更容易實現並且性能更高。從父母到孩子的數據綁定傳播價值的變化，向上是由事件完成的。這篇文章應該提供一些見解http://victorsavkin.com/post/110170125256/change-detection-in-angular-2 –

謝謝，我只是習慣於範圍：{model：'='}'做了所有舉重，無輸入，輸出，EventEmitters等，我會讀。似乎好處是性能，而不是可讀性。 – lux

如果您使用的對象，而不是一個整數/原始的輸入特性，父母會看到的變化，因爲無論是家長和孩子有相同的對象引用。（我想這有點類似於角1 =綁定）。通過這種方法，你不需要使用事件：

export class App { 
    model = {value: 1}; 

export class MySelect { 
    selectOption(event) { 
    this.model.value = event; 
    }

Plunker

我不知道這是否是一個推薦的方法（即事件可能是向父母傳遞信息的唯一推薦方法），但Structural Directives指南中的heavy-loader示例使用上面介紹的技術。主/父組件具有logs數組屬性，該屬性綁定到子組件作爲輸入屬性。子組件簡單地push()到該數組上，父組件顯示該數組。

來源

2015-12-28 20:57:22

@Input雙向綁定

回答

相關問題