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>

单击仅一个项目时，在同一父项中同步两个相同类型的组件

1 个答案: