2017-04-17 10 views
0

私はページングコンポーネントを作成しようとしていますので、私のリストでは多くのコードを繰り返す必要はありません。私はES5フレーバーでAngular 2も使用しています。したがって、ここに私のコードです:複雑なタイプの角型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にinterplation構文を持っている子コンポーネント、内部で変化しない:従ってください。 listParametersはオブジェクトであり、単純なプロパティではないことに注意してください。

何が問題なのですか?

更新:

これは、それが他の部品に使われている方法で、例えば言う、従業員のリスト:

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

listOptionsは、これらのプロパティがありますpageNumberpageSizesorts配列で、 filtersも配列です。

+0

は、子コンポーネントに何を変更する必要がありますか? {{listOptions.pageNumber}}など、子コンポーネントには、詳細を – echonax

+0

@echonaxとしてください。それは何も示していない。 –

+0

@SaeedNeamatiあなたが詳細を含まないと何が間違っているかをどのように知ることができますか? :-)ページングコンポーネントは子か親ですか? – echonax

答えて

0

あなた@Inputあなたは双方向を持っているために、テンプレートに

親テンプレート

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

paging.component.js

inputs: ['listOptions'] 

を書いたのと同じ名前を持つ必要がありますあなたはの出力をに持つ必要があります部品

Plunker example

関連する問題