创建新项目

接下来我们将进行的项目将展示一组带有分页功能的图片。本节的重点是学习指令（directives）。首先，我们先创建一个新项目。

新项目

如果你在本地运行代码，请执行以下命令：

1ng new directives

在设置过程中，系统会提示你配置项目。请使用默认设置。

安装 Bootstrap

项目安装完成后，进入新创建的目录，并安装 Bootstrap。我们将使用它来处理样式。可以运行以下命令来安装 Bootstrap：

1npm i bootstrap

我们需要更新 styles.css 文件以导入 Bootstrap。

1@import "bootstrap/dist/css/bootstrap.css";

添加数据

接下来，我们将添加应用中使用的图片集合。你可以下载一些自己喜欢的图片并上传到 assets 目录中。或者，也可以直接提供图片链接。有两个网站可以获取免版权图片：Unsplash 和 Lorem Picsum。

获取图片后，我们更新 app.component.ts 文件，定义一个名为 images 的属性。数组中的每个元素都是一个包含两个属性的对象：title 和 url。title 属性为示例文本，url 属性为图片的链接。

1export class AppComponent {
2  images = [
3    {
4      title: '标题 #1',
5      url: 'https://images.unsplash.com/photo-1588750099599-09efbe4377ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80'
6    },
7    {
8      title: '标题 #2',
9      url: 'https://images.unsplash.com/photo-1588598158189-3d6e4dade28b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80'
10    },
11    {
12      title: '标题 #3',
13      url: 'https://images.unsplash.com/photo-1588607684532-1c4a7ab618f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80'
14    },
15    {
16      title: '标题 #4',
17      url: 'https://images.unsplash.com/photo-1588710277537-126980e8d44e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80'
18    },
19    {
20      title: '标题 #5',
21      url: 'https://images.unsplash.com/photo-1588627541420-fce3f661b779?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80'
22    },
23    {
24      title: '标题 #6',
25      url: 'https://images.unsplash.com/photo-1588607778482-2358f4f0be5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1001&q=80'
26    }
27  ];
28}

遍历图片

最后一步是输出用于导航图片集合的链接。我们将使用 ngFor 指令来实现这一点。更新 app.component.html 文件内容如下：

1<ul class="pagination">
2  <li class="page-item"><a class="page-link" href="#">上一页</a></li>
3  <li class="page-item" *ngFor="let img of images; let i = index;">
4    <a class="page-link" href="#">{{ i + 1 }}</a>
5  </li>
6  <li class="page-item"><a class="page-link" href="#">下一页</a></li>
7</ul>

上述示例使用了 Bootstrap 的分页组件。更多信息可参考：https://getbootstrap.com/docs/5.0/components/pagination/。

这里有三个链接。第一个和最后一个链接用于跳转到前一张或下一张图片。中间的链接将通过循环生成指向图片集合中具体项目的链接。我们使用了 ngFor 指令来实现。

每次迭代中的项目被赋予别名 img。同时我们也捕获了索引值，其别名为 i。

最后，我们输出的是索引加 1。之所以加 1，是因为数组是零索引的。数组的第一个元素索引为 0，但大多数人通常从 1 开始计数。我们通过加 1 来让按钮更易于理解。

以下是本节课修改后的项目效果：