Angular 中如何实现分页功能-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，分页功能是非常常见的需求。在使用 Angular 开发 web 应用时，我们也需要实现这样的功能。本文将介绍如何使用 Angular 实现分页功能，包括实现思路、具体步骤和示例代码。

实现思路

Angular 中实现分页功能的思路相对简单：首先获取到需要分页的数据，根据每页显示的数据数量和当前页码，计算出需要展示的数据范围，然后将数据渲染到页面上。因此，实现分页功能需要完成以下几个步骤：

获取需要分页的数据
计算每页需要展示的数据范围
将数据渲染到页面上
根据用户的操作，修改当前页码并重新渲染数据

具体步骤

1. 获取需要分页的数据

我们可以使用 Angular 的 HttpClient 模块获取到需要分页的数据。例如，我们可以写一个服务来获取用户列表：

// www.javascriptcn.com code example
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://example.com/api/users';

  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get(this.apiUrl);
  }
}

2. 计算每页需要展示的数据范围

在组件中，我们可以使用 Angular 的管道(Pipe)和内置的 SlicePipe 来计算每页需要展示的数据范围。SlicePipe 可以从一个数组中获取指定位置和长度的数据子集。例如，针对一个用户数组（users），我们可以通过 SlicePipe 计算出当前页需要展示的用户数据：

<ul>
  <li *ngFor="let user of (users | slice:start:end)">{{user.name}}</li>
</ul>

在组件中，我们需要定义当前页码和每页显示的数据数量，并计算出每页展示的数据范围：

// www.javascriptcn.com code example
@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: any[] = [];
  currentPage = 1;
  pageSize = 10;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(data => {
      this.users = data;
    });
  }

  get start() {
    return (this.currentPage - 1) * this.pageSize;
  }

  get end() {
    return this.start + this.pageSize;
  }
}

3. 将数据渲染到页面上

在 HTML 模板中，我们可以使用 Angular 的指令(ngIf、ngFor)显示分页控件和当前页的数据：

// www.javascriptcn.com code example
<div>
  <!-- 分页控件 -->
  <ul>
    <li *ngFor="let page of pages">
      <a href="#" (click)="currentPage=page">{{ page }}</a>
    </li>
  </ul>

  <!-- 当前页的数据 -->
  <ul>
    <li *ngFor="let user of (users | slice:start:end)">{{user.name}}</li>
  </ul>
</div>

在组件中，我们需要计算出分页控件中需要显示的页码，并将页码渲染到页面上：

// www.javascriptcn.com code example
@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: any[] = [];
  currentPage = 1;
  pageSize = 10;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(data => {
      this.users = data;
    });
  }

  get start() {
    return (this.currentPage - 1) * this.pageSize;
  }

  get end() {
    return this.start + this.pageSize;
  }

  get pages() {
    const pageCount = Math.ceil(this.users.length / this.pageSize);
    const pages = [];
    for (let i = 1; i <= pageCount; i++) {
      pages.push(i);
    }
    return pages;
  }
}

4. 根据用户的操作，修改当前页码并重新渲染数据

在分页控件中，我们需要为每个页码绑定一个点击事件，当用户点击页码时，我们需要修改当前页码并重新渲染数据。在组件中，我们可以编写一个 changePage() 方法：

// www.javascriptcn.com code example
@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: any[] = [];
  currentPage = 1;
  pageSize = 10;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(data => {
      this.users = data;
    });
  }

  get start() {
    return (this.currentPage - 1) * this.pageSize;
  }

  get end() {
    return this.start + this.pageSize;
  }

  get pages() {
    const pageCount = Math.ceil(this.users.length / this.pageSize);
    const pages = [];
    for (let i = 1; i <= pageCount; i++) {
      pages.push(i);
    }
    return pages;
  }

  changePage(page: number) {
    this.currentPage = page;
  }
}

在 HTML 模板中，我们需要为每个页码绑定 changePage() 方法，并传入对应的页码：

// www.javascriptcn.com code example
<div>
  <!-- 分页控件 -->
  <ul>
    <li *ngFor="let page of pages">
      <a href="#" (click)="changePage(page)">{{ page }}</a>
    </li>
  </ul>

  <!-- 当前页的数据 -->
  <ul>
    <li *ngFor="let user of (users | slice:start:end)">{{user.name}}</li>
  </ul>
</div>

至此，我们就完成了 Angular 中的分页功能。

示例代码

完整的示例代码如下：

// www.javascriptcn.com code example
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: any[] = [];
  currentPage = 1;
  pageSize = 10;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(data => {
      this.users = data;
    });
  }

  get start() {
    return (this.currentPage - 1) * this.pageSize;
  }

  get end() {
    return this.start + this.pageSize;
  }

  get pages() {
    const pageCount = Math.ceil(this.users.length / this.pageSize);
    const pages = [];
    for (let i = 1; i <= pageCount; i++) {
      pages.push(i);
    }
    return pages;
  }

  changePage(page: number) {
    this.currentPage = page;
  }
}

// www.javascriptcn.com code example
<div>
  <!-- 分页控件 -->
  <ul>
    <li *ngFor="let page of pages">
      <a href="#" (click)="changePage(page)">{{ page }}</a>
    </li>
  </ul>

  <!-- 当前页的数据 -->
  <ul>
    <li *ngFor="let user of (users | slice:start:end)">{{user.name}}</li>
  </ul>
</div>

指导意义

本文所介绍的 Angular 分页功能的实现思路和具体步骤，可在实际开发中指导开发者实现分页功能。同时，使用 Angular 中的内置管道 SlicePipe 和 HttpClient 模块实现分页功能，也可以让开发者更加轻松、高效地开发 web 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7c485a941bf7134de9abe

Angular 中如何实现分页功能