对于自定义组件的复杂类型的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这也是一个数组。

我应该在子组件改变？请给出更多的细节 – echonax

@echonax，在子组件中我们有' {{listOptions.pageNumber}}'例如。它什么都没显示。 –

@SaeedNeamati如果你不包括细节，我们怎么知道有什么问题？ :-)分页组件是孩子还是父母？ – echonax

答

你@Input应该有相同的名字，你在模板中写道

父模板

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

paging.component.js

inputs: ['listOptions']

有两个路绑定你需要在有listOptionsChange输出组件

Plunker example

对于自定义组件的复杂类型的Angular 2双向绑定

相关推荐