Question

我正在尝试创建分页组件，因此在我的列表中我不需要重复大量代码。我也在ES5风格中使用Angular 2。这就是我的代码：

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

以下是我如何使用它：

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

我当然要将其改进为双向数据绑定（框中语法为banana），如下所示：

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

但是当我在父组件中更改listParameters时，子组件内部没有任何更改，子组件在模板HTML中具有插入语法。请注意listParameters是一个对象，而不是一个简单的属性，我也是

有什么不对？

更新

这就是它在其他组件中的使用方式，例如员工名单：

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

listOptions包含以下属性：pageNumber，pageSize，sorts这是一个数组，filters也是一个数组。

Answer 1

您的@Input名称与您在模板中的名称相同

父模板

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

<强> paging.component.js

inputs: ['listOptions']

要进行双向绑定，您需要在listOptionsChange组件中输出Paging

<强> Plunker example

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

1 个答案: