Question

使用Angular 4.我有paging.component从其父组件获取页面号码和 pageSize （获取数据后）

paging.component将使用@Input生命周期挂钩查找OnChanges的更改。

paging.component还有<select>输入，您可以在其中更改 pageSize 。

在OnInit阶段，<select>设置为从父组件传入的 pageSize 。

如果您使用<select>更改 pageSize ，一切正常，但我有时也希望将 pageSize 从父组件更改为不同的值（如原始值）。

但是，当我从父组件更改 pageSize 时，它不会更改<select>输入。（即使其他一切似乎都能正常工作）。

我尝试将以下代码添加到ngOnChanges方法：

if (this.pageSizeFG) {
    this.pageSizeCtrl.setValue(this.pagesize);
}

然而，这会产生错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生了变化。以前的价值：＆＃39; false＆＃39;。当前价值：＆＃39; true＆＃39;。

如果我尝试转到其他页面，分页似乎也会继续重置到第1页。

我已经查看了其他一些生命周期挂钩ChangeDetectorRef和ngZone，但这些似乎会让问题变得更糟。

我创建了一个plnkr here来演示错误。

如果您转到paging.component.ts并使用this.pageSizeCtrl.setValue(this.pagesize);注释掉该行，那么一切正常除了 <select>不会更新。

Answer 1

这是由您的select元素上的ngModelChange事件+ ngOnchanges生命周期方法引起的。

<select (ngModelChange)="setPageSize($event)">...</select>

发生的事情是

您将新输入传递给paging.component

ngOnChanges fires

在ngOnChanges中，this.pageSizeCtrl.setValue（this.pagesize）触发

这会导致触发ngModelChange事件（setPageSize）

setPageSize发送到父组件

parent更改输入，导致ngOnChanges再次触发。

所以这一切都导致表达式改变了错误。

要解决此问题，我会使用更改事件而不是ngModelChange

<select (change)="setPageSize()">...</select>

这种方式setValue()不会导致setPageSize()事件触发。您还需要更新setPageSize()如何发布pageSize属性。

setPageSize() {
    // get pageSizeCtrl value programatically
    let pageSize = +this.pageSizeCtrl.value;
    this.pagechange.emit({ page: 1, pageSize: pageSize });
}

这是一个带有修正（http://plnkr.co/edit/zJEIYJzG5OGRXIfA77Qz?p=preview）

的工作plnkr

Angular 4 - 在OnChanges（）

1 个答案: