當只有一個項目被點擊時，在同一父項中同步兩個相同類型的組件

Question

我是Angular 2和Typescript的新手，並且正在處理已添加到包含表的組件的分頁程序組件。該傳呼機工作正常，但我有兩個這樣的傳呼機一個在桌子上面，另一個在下面。當第一個尋呼機上的下一個按鈕被點擊時，我需要讓這兩個尋呼機向前或向後移動，以便它們同步。我看到了使用共享服務的建議，但我不確定這是否會起作用，因爲它們是相同的組件。

我該如何觸發未點擊的按鈕也認爲它已被點擊，或者只是將一個分頁器組件的行爲鏡像到其他分頁器組件上？ 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另一種方法是你可以有兩個尋呼機組件通過@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>