Liaison bidirectionnelle angulaire 2 pour un type complexe de composant personnalisé

Question

J'essaie de créer un composant de pagination, de sorte que dans mes listes, je n'ai pas besoin de répéter beaucoup de code. J'utilise aussi Angular 2 dans la saveur ES5. Ainsi voici mon code:

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

Et voici comment je l'utilise:

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

Et bien sûr, je suis sur le point d'améliorer en données dans les deux sens de liaison (banane dans la syntaxe encadré) suivre:

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

Mais comme je change listParameters dans le composant parent, rien ne change à l'intérieur du composant enfant, qui a une syntaxe interplation dans le code HTML de modèle. S'il vous plaît noter que listParameters est un objet, pas une simple propriété, et j'ai

Qu'est-ce qui ne va pas?

Mise à jour:

Voici comment il est utilisé dans d'autres composants, disons par exemple, la liste des employés:

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

listOptions a ces propriétés: pageNumber, pageSize, sorts qui est un tableau, et filters qui est un tableau aussi.

Answer 1

Votre @Input devrait avoir le même nom que vous avez écrit dans le modèle

modèle parent

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

paging.component.js

inputs: ['listOptions'] 

Pour avoir deux voies liaison, vous devez avoir sortie listOptionsChange en Paging composant

Plunker example