同じ親の同じ種類の2つのコンポーネントを1つのアイテムしかクリックしないで同期させる

Question

私はAngular 2とTypescriptを初めて使用していて、テーブルを含むコンポーネントに追加されたページャーコンポーネントで作業しています。ページャーはうまく動作しますが、私はこれらのページャーのうちの2つをテーブルの上に1つ、下にもう1つ持っています。最初のページャの次のボタンをクリックすると、両方のページャを前後に動かす必要があります。私は共有サービスを使用するための提案を見てきましたが、同じコンポーネントなので動作するかどうかはわかりません。

クリックしていないと思ってボタンをクリックしたり、あるページャーコンポーネントの動作を他のページャーコンポーネントに反映させるにはどうすればよいですか？ Angular 2にはこれを行う方法がありますか？

親HTML：

<table-pager [(resort)]="resort" [recordPerPage]="recordPerPage" [totalItems]="totalItems" (onSetPage)="setPage($event)"></table-pager> 
     <table class="uReportStandard" id="udfTable"> 
     <thead class="highlight-row"> 
     <tr> 
      <th role="columnheader">Remove/Edit</th> 
      <th *ngFor="let column of columns" role="columnheader" (click)="setSort(column)"> 
      {{column.name}}&nbsp; 
      <img *ngIf="column.sortOrder == 'ASC'" src="./images/sort_asc.png" alt="Ascending" title="Ascending" class="tableIcon" /> 
      <img *ngIf="column.sortOrder == 'DESC'" src="./images/sort_desc.png" alt="Descending" title="Descending" class="tableIcon" /> 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr *ngFor="let udf of userDefinedField"> 
      <td class="tableIcons"> 
       <img src="./images/remove.png" alt="Remove" 
       (click)="deleteRow(udf.ID, 'Are you sure you want to remove the field: ' + udf.NAME)" 
       title="Remove" class="tableIcon" /> 
       <img src="./images/edit.png" alt="Edit" title="Edit" class="tableIcon" (click)="edit(udf.ID, udf.NAME, udf.DESCRIPTION)" /> 
      </td> 
      <td>{{udf.ID}}</td> 
      <td>{{udf.NAME}}</td> 
      <td>{{udf.DESCRIPTION}}</td> 
     </tr> 
     </tbody> 
     </table> 
     <table-pager [(resort)]="resort" [recordPerPage]="recordPerPage" [totalItems]="totalItems" (onSetPage)="setPage($event)"></table-pager> 

ページャコンポーネント：

export class PagerComponent implements OnInit, OnChanges { 

    @Input() recordPerPage: number; 
    @Input() totalItems: number; 
    @Input() resort: boolean = false; 

    @Output() onSetPage: EventEmitter<any> = new EventEmitter<any>(); 

    totalPages: number; 
    startIndex: number; 
    endIndex: number; 
    currentPage: number; 

    constructor() { } 

    ngOnInit() {} 

    ngOnChanges(changes: any) { 
    console.log('OnChange called'); 
    //get total pages count 
    let pagesCount = this.totalItems/this.recordPerPage; 
    //If there is a remainder then add one to the page 
    if((this.totalItems % this.recordPerPage) > 0){ 
      pagesCount = pagesCount + 1; 
    } 

    this.resort = false; 
    this.totalPages = pagesCount; 
    this.setPage(1, null); 
    } 


    setPage(page: number, direction: string = null) { 
    if(direction === 'previous') { 
     if (this.startIndex <= 1) { 
      console.log('On the starting page'); 
      return; 
     } 
    } else if (direction === 'next') { 
     if (this.totalItems === this.endIndex) { 
      console.log('On the last page'); 
      return; 
     } 
    } else if (page < 1) { 
     console.log("Invalid page number."); 
     //callback 
     //this.onSetPage.emit(0); 
     return; 
    } 

    this.currentPage = page; 
    this.startIndex = 1 + (page-1)*this.recordPerPage; 
    this.endIndex = this.startIndex + +this.recordPerPage - 1; 
    if(this.endIndex > this.totalItems) { 
     this.endIndex = this.totalItems; 
    } 
    let resortHolder = this.resort; 

    //callback 
    this.onSetPage.emit({page, resortHolder}); 
    } 

ページャHTML：

<div *ngIf="totalItems == 0"> 
    <p>No records found</p> 
</div> 
<div *ngIf="totalPages >= 2" class="pagination"> 
    <span [ngClass]="{disabled:currentPage == 1}" (click)="setPage(currentPage - 1, 'previous')"> 
      <img src="./images/previous.png" alt="Previous" title="Previous" class="tableIcon" /> 
     Previous 
    </span> 
    <span>{{startIndex}} - {{endIndex}} of {{totalItems}} 
    </span> 
    <span [ngClass]="{disabled:endIndex == totalItems}" (click)="setPage(currentPage + 1, 'next')"> 
     Next 
     <img src="./images/next.png" alt="Next" title="next" class="tableIcon"/> 
    </span>   
</div> 

Answer 1

あなたはshared service代替を使用したくない場合は、あなたが持っている可能性があります2つのページャコンポーネントは、@Outputイベントを介して通信します。このrelated question

<table-pager #firstPager (nextClicked)="secondPager.clickNext($event)"></table-pager> 
// the table html .. 
<table-pager #secondPager (nextClicked)="firstPage.clickNext($event)"></table-pager> 

もう一つは、（単純？）方法は、ページャコンポーネントは「トップ」および「ボトム」ページャを表示するようにしますページャコンポーネントのテンプレートを変更すること、およびコンテンツを使用する参照、「次のクリックされました」それらの間のテーブルを配置するプロジェクト：

ポケットベルHTMLテンプレート：

<!-- Top pager --> 
<div *ngIf="totalPages >= 2" class="pagination"> 
    <span [ngClass]="{disabled:currentPage == 1}" (click)="setPage(currentPage - 1, 'previous')"> 
      <img src="./images/previous.png" alt="Previous" title="Previous" class="tableIcon" /> 
     Previous 
    </span> 
    <span>{{startIndex}} - {{endIndex}} of {{totalItems}} 
    </span> 
    <span [ngClass]="{disabled:endIndex == totalItems}" (click)="setPage(currentPage + 1, 'next')"> 
     Next 
     <img src="./images/next.png" alt="Next" title="next" class="tableIcon"/> 
    </span>   
</div> 

<!-- Content projected here --> 
<ng-content></ng-content> 

<!-- Below pager --> 
<div *ngIf="totalPages >= 2" class="pagination"> 
    <span [ngClass]="{disabled:currentPage == 1}" (click)="setPage(currentPage - 1, 'previous')"> 
      <img src="./images/previous.png" alt="Previous" title="Previous" class="tableIcon" /> 
     Previous 
    </span> 
    <span>{{startIndex}} - {{endIndex}} of {{totalItems}} 
    </span> 
    <span [ngClass]="{disabled:endIndex == totalItems}" (click)="setPage(currentPage + 1, 'next')"> 
     Next 
     <img src="./images/next.png" alt="Next" title="next" class="tableIcon"/> 
    </span>   
</div> 

そして親テンプレート：

<table-pager [(resort)]="resort" [recordPerPage]="recordPerPage" [totalItems]="totalItems" (onSetPage)="setPage($event)"> 
    <table> .. your table definition ... </table> 
</table-pager>