對於自定義組件的複雜類型的Angular 2雙向綁定

我想創建一個分頁組件，以便在我的列表中我不需要重複很多代碼。我也使用ES5風格的Angular 2。因此，這裏是我的代碼：對於自定義組件的複雜類型的Angular 2雙向綁定

app.pagingComponent = ng.core.Component({ 
     templateUrl: '/pathToPagingHtml', 
     selector: 'paging', 
     inputs: ['listParameters'] 
    }).Class({ 
     constructor: function() { 
     } 
    });

下面是我如何使用它：

<paging [listParameters]="listParameters"></paging>

當然，我要把它提高到雙向數據綁定（在框中語法香蕉）作爲遵循：

<paging [(listParameters)]="listParameters"></paging>

但正如我在父組件改變listParameters，沒啥子組件，它在模板的HTML語法插值的內部變化。請注意，listParameters是一個對象，而不是一個簡單的屬性，我也

什麼可能是錯的？

更新：

這是它是如何在其他組件使用，比方說，員工的名單：

<table id='employeesList'> 
    <!-- showing the list here --> 
</table> 
<paging [(listOptions)]="listOptions"></paging>

listOptions具有以下屬性：pageNumber，pageSize，sorts這是一個數組， filters這也是一個數組。

來源

2017-04-17 ali fallah

我應該在子組件改變？請給出更多的細節 – echonax

@echonax，在子組件中我們有' {{listOptions.pageNumber}}'例如。它什麼都沒顯示。 –

@SaeedNeamati如果你不包括細節，我們怎麼知道有什麼問題？ :-)分頁組件是孩子還是父母？ – echonax

你@Input應該有相同的名字，你在模板中寫道

父模板

<paging [(listOptions)]="listOptions"></paging>

paging.component.js

inputs: ['listOptions']

有兩個路綁定你需要在有listOptionsChange輸出組件

Plunker example

來源

2017-04-17 05:49:09 yurzui

對於自定義組件的複雜類型的Angular 2雙向綁定

回答

相關問題