我们向往常一下初始化班级列表组件。使用`shell`打开`src/app`目录，在此目录中执行`ng g c clazz`。与前面的手法不太相同的是，以往我们在执行`ng g c xxx`时都会生成一个新的文件夹；此次`src/app/clazz`文件夹在建立班级模块时便创建好了，此时在执行`ng g c clazz`组件时，会直接将组件创建到`clazz`目录，创建以前`src/app/clazz`目录内容如下： ```bash panjie@panjie-de-Mac-Pro app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjie-de-Mac-Pro app % tree clazz clazz ├── add │   ├── add.component.css │   ├── add.component.html │   ├── add.component.mock-api.spec.ts │   ├── add.component.spec.ts │   └── add.component.ts ├── clazz.module.ts └── klass-select ├── klass-select.component.css ├── klass-select.component.html ├── klass-select.component.spec.ts └── klass-select.component.ts 2 directories, 10 files ``` 在`src/app`下执行`ng g c clazz`: ```bash panjie@panjie-de-Mac-Pro app % ng g c clazz Your global Angular CLI version (11.2.6) is greater than your local version (11.0.7). The local Angular CLI version is used. To disable this warning use "ng config -g cli.warnings.versionMismatch false". CREATE src/app/clazz/clazz.component.css (0 bytes) CREATE src/app/clazz/clazz.component.html (20 bytes) CREATE src/app/clazz/clazz.component.spec.ts (619 bytes) CREATE src/app/clazz/clazz.component.ts (271 bytes) UPDATE src/app/clazz/clazz.module.ts (523 bytes) ``` 此时`src/app/clazz`目录如下： ```bash panjie@panjie-de-Mac-Pro app % tree clazz clazz ├── add │   ├── add.component.css │   ├── add.component.html │   ├── add.component.mock-api.spec.ts │   ├── add.component.spec.ts │   └── add.component.ts ├── clazz.component.css ├── clazz.component.html ├── clazz.component.spec.ts ├── clazz.component.ts ├── clazz.module.ts └── klass-select ├── klass-select.component.css ├── klass-select.component.html ├── klass-select.component.spec.ts └── klass-select.component.ts 2 directories, 14 files ``` 可见，在`clazz`目录下生成了班级列表组件对应的4个文件。接下来我们打开`clazz.component.spec.ts`，增加自动检测变更的代码，将`it`变更为`fit`，最后启用单元测试`ng t`: ```typescript +++ b/first-app/src/app/clazz/clazz.component.spec.ts @@ -19,7 +19,8 @@ describe('ClazzComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + fit('should create', () => { expect(component).toBeTruthy(); + fixture.autoDetectChanges(); }); }); ``` ## 原型 项目开启，原型先行，无论是新手还是老手，这都是最简单最有效的步骤，我们先增加一个普通的班级列表： ```html <table class="table table-striped mt-2"> <thead> <tr class="table-primary"> <th>序号</th> <th>名称</th> <th>班主任</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>班级1</td> <td>张三</td> <td> <a class="btn btn-outline-primary btn-sm" > <i class="fas fa-pen"></i>编辑 </a> <span class="btn btn-sm btn-outline-danger" > <i class="far fa-trash-alt"></i>删除 </span> </td> </tr> <tr> <td>2</td> <td>班级2</td> <td>李四</td> <td> <a class="btn btn-outline-primary btn-sm" > <i class="fas fa-pen"></i>编辑 </a> <span class="btn btn-sm btn-outline-danger" > <i class="far fa-trash-alt"></i>删除 </span> </td> </tr> <tr> <td>3</td> <td>班级3</td> <td>王五</td> <td> <a class="btn btn-outline-primary btn-sm" > <i class="fas fa-pen"></i>编辑 </a> <span class="btn btn-sm btn-outline-danger" > <i class="far fa-trash-alt"></i>删除 </span> </td> </tr> </tbody> </table> ``` 效果如下：  界面虽说还行，但编辑、删除两个按钮离的太近了；另外，按钮中的小图标和文字离的也太近了。我们在`styles.css`解决一下这个问题: ```css +++ b/first-app/src/styles.css @@ -1 +1,8 @@ /* You can add global styles to this file, and also import other style files */ +.btn { + margin-right: 0.5em; +} + +.btn > svg.svg-inline--fa { + margin-right: 0.3em; +} ```  看起来好像顺眼多了，更重要的是：由于我们把样式代码写到了`styles.css`中，它影响的范围是整个项目，这样以下其它的组件也可以使用该样式了。 ### 新增按钮 接下来再添加一个新增按钮： ```html +++ b/first-app/src/app/clazz/clazz.component.html @@ -1,3 +1,9 @@ +<div class="row"> + <div class="col-12 text-right"> + <a class="btn btn-primary mr-2"><i class="fas fa-plus"></i>新增</a> + </div> +</div> + <table class="table table-striped mt-2"> <thead> <tr class="table-primary"> ``` 测试过程略。 ## 分页 最后我们在原型中加入分页。相关的代码bootstrap的相关网站为我们准备好了，我们仅需要复制下来再按当前的需求进行整理即可。需要注意的是，在生产项目中我们有时候也会碰到从网上复制的代码效果不对的情况，这往往是由于bootstrap的版本号没有对应好的原因。比如我们教程中当前使用的是版本4，则在参考网上的代码时，首先在确认其版本也是4，否则则可能做无用功。 ```html +++ b/first-app/src/app/clazz/clazz.component.html @@ -55,3 +55,13 @@ </tr> </tbody> </table> + +<nav class="row justify-content-md-center"> + <ul class="pagination col-md-auto"> + <li class="page-item"><a class="page-link" href="#">下一页</a></li> + <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item"><a class="page-link" href="#">2</a></li> + <li class="page-item"><a class="page-link" href="#">3</a></li> + <li class="page-item"><a class="page-link" href="#">下一页</a></li> + </ul> +</nav> ``` 效果如下：  最后进行完美： ```html +++ b/first-app/src/app/clazz/clazz.component.html @@ -58,8 +58,8 @@ <nav class="row justify-content-md-center"> <ul class="pagination col-md-auto"> - <li class="page-item"><a class="page-link" href="#">下一页</a></li> - <li class="page-item"><a class="page-link" href="#">1</a></li> + <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li> + <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">下一页</a></li> ``` 最终分页效果如下：  ## 作业 本节中我们添加了两个全局样式，其中一个是设置按钮中的图标与字体的间隔的，请问我们为什么设置的是`.btn > svg.svg-inline--fa`属性，而非`.btn > i`属性。 | 名称 | 链接 | | -------- | ------------------------------------------------------------ | | 分页样式 | [https://getbootstrap.com/docs/5.0/components/pagination/](https://getbootstrap.com/docs/5.0/components/pagination/) | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.3.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.3.1.zip) |