具有双向绑定输入的Angular2组件不会触发更改事件答案

【问题标题】：Angular2 component with two-way binding Input not trigger the change event具有双向绑定输入的Angular2组件不会触发更改事件
【发布时间】：2017-09-04 19:10:11
【问题描述】：

我有一个分页器组件来显示页面列表并检测用户何时单击以显示另一个页面并且该组件不更改页面仅必须触发事件但我无法观看更改事件。

该组件有一个双向绑定来宣布当前页面已更改并且可以正常工作，因为我可以在更改后在 html 中显示该值（请参阅

在 HTML 中）。

在分页器组件中更改当前页面后如何执行页面更改？

我阅读了以下https://stackoverflow.com/questions/36150107/angular-2-change-event-model-changes 但不适用于我的情况。

HTML（使用分页器）：

<paginator [pageCount]=pageCount [(currentPage)]=currentPage (ngModelChange)="pageChanged($event)"></paginator> <!--pageChanged is not called-->
<p>{{currentPage}}</p> <!--Work Fine showing the new page selected!-->

TS（分页器组件）：

import { Component, OnInit, OnChanges, SimpleChanges, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'paginator',
  templateUrl: './paginator.component.html',
  styleUrls: ['./paginator.component.css']
})
export class PaginatorComponent implements OnInit, OnChanges {

  pageList : number[] = [1];  

  @Input()  pageCount   : number = 1;
  @Input()  currentPage : number = 1; 
  @Output() currentPageChange = new EventEmitter<number>();

  constructor(private ref:ChangeDetectorRef) {}

  ngOnInit() 
  {
    this.loadPageList();
  }

  ngOnChanges(changes: SimpleChanges)
  {
    this.loadPageList();
  }

  changePage(page : number)
  {
    if(page < 1)
        return;

    if(page > 1 && page > this.pageCount)
      return;

    if(this.currentPage == page)
      return;

    this.currentPage = page;

    this.currentPageChange.emit(this.currentPage);    
  }

  private loadPageList()
  {
      if(this.pageCount < 1)
        this.pageCount = 1;

      let pages = [1];

      for(let p = 2; p <= this.pageCount; p++)
        pages.push(p);

      this.pageList = pages;

      this.ref.detectChanges();          
  }
}

HTML（分页器组件）：

<div class="row">
    <div class="col-md-12 text-center">
        <ul class="pagination">
            <li><a (click)="changePage(1)">&laquo;</a></li>
            <li><a (click)="changePage(currentPage - 1)">&#10094;</a></li>
            <li *ngFor="let page of pageList" [class.active]="currentPage==page">
                <a id="changePage{{page}}" (click)="changePage(page)">{{page}}</a>
            </li>
            <li><a (click)="changePage(currentPage + 1)">&#10095;</a></li>
            <li><a (click)="changePage(pageCount)">&raquo;</a></li>
        </ul>
    </div>
</div>

【问题讨论】：

标签： angular

【解决方案1】：

当您使用currentPageChange 作为输出变量时，您应该使用它来处理事件

<paginator [pageCount]=pageCount [currentPage]="currentPage"
         (currentPageChange)="pageChanged($event)"></paginator> 

<p>{{currentPage}}</p> <!--Work Fine showing the new page selected!-->

【讨论】：

这不是正确的答案。 OP 所询问的双向数据绑定旨在使用[(property)] 语法。将“更改”后缀添加到 Output 名称是您应该向 Angular 发出信号，即属性应该是双向绑定的，而不是需要挂钩到 Output 事件并手动处理它。

【解决方案2】：

我知道这个问题永远存在，但我昨天在试图弄清楚如何让它发挥作用时偶然发现了这个问题。

我认为给定示例中的 OP 缺少的是您应该在目标属性的 setter 方法中发出新值，如下所示：

private _currentPage: number = 1;

@Input() get currentPage(): number {
  return this._currentPage;
}

set currentPage(value: number) {
  this._currentPage = value;
  this.currentPageChange.emit(value);
}

@Output() currentPageChange = new EventEmitter<number>();

仅通过适当命名的EventEmitter 发出新值不足以使属性双向绑定。您需要发出事件作为设置值的副作用——方法是通过set 方法。

这是一个演示实际效果的最小 StackBlitz 示例：https://stackblitz.com/edit/angular-l9d89t

当值在一个地方（父组件或子组件）发生变化时，它会在两个地方无缝更新。魔法！

【讨论】：