angular - 角度分页作为不同组件的问题

Question

我为我的 Angular Web 应用程序创建了一个分页，它工作得很好。但是我多次重复相同的代码，每次针对不同的页面/组件，这是不好的编码，所以我创建了一个新的分页组件。

然后，而不是为每个 html 文件添加这个块 -

<pagination-template #p="paginationApi" [id]="config.id" (pageChange)="config.currentPage = $event">
  <div class="custom-pagination">
    <button class="previous" [class.disabled]="p.isFirstPage()"
    *ngIf="!p.isFirstPage()" (click)="previous()">previous</button>
    <div class="page-number" *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
      <button class="not-current-page" (click)="onPageChange(page.value)" 
      *ngIf="p.getCurrent() !== page.value">{{ page.label }}</button> 
      <button class="current-page" *ngIf="p.getCurrent() === page.value">{{ page.label }}</button>            
    </div>
    <button class="next" [class.disabled]="p.isLastPage()" *ngIf="!p.isLastPage()" 
    (click)="next()">next</button>
  </div>
</pagination-template>

我只是写了 <app-pagination></app-pagination>，但它没有用。

这些按钮是可见的，但它们不会更改页面，它们只是将我带到当前页面的顶部。

这是 .ts 文件：

export class PaginationComponent implements OnInit {

  things: Thing[];
  searchInput = '';
  p: number = 1;
  config = {id: 'custom', maxSize: 3, itemsPerPage: 4, currentPage: 1};

  constructor(private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    window.scrollTo(0, 0);
    this.activatedRoute.data.subscribe((data: { things: Thing[] }) => {
      this.things = data.things.slice().reverse();
    });
  }

  onPageChange(event) {
    this.config.currentPage = event;
    window.scrollTo(0, 0);
  }

  previous() {
    this.config.currentPage--;
    window.scrollTo(0, 0);
  }

  next() {
    this.config.currentPage++;
    window.scrollTo(0, 0);
  }
}

感谢 ：）））

标签： angularpagination