本节我们尝试引入一个更加友好的对话框来替换原生的`confirm`对话。 对话框在英文中又称为`alert`、`Dialog`或是 `notifications`，以`html confirm beautiful dialog`为关键字搜索，可以找到很多优秀的组件。比如[https://www.cssscript.com/tag/confirm/](https://www.cssscript.com/tag/confirm/)一文中给出了30种具体这样功能的组件：`Notiflix`，`Cute Alert`，`Asteroid Alert`，`sweet alert`，`Confirmo`等。 如此众多的组件（包），到底该怎么选择呢？建议如下： 1. 如果有一篇类似于总结的文章，优先选择位于前面的包。因为虽然它可能不是最少的，但却必然不会是最差的。 2. 优先选择`npm`已托管的包（组件），包被`npm`托管说明该项目不会太过时，同时安装起来也不会太难。 3. 优先使用自己说明文档能被自己看懂的包，这样的阻力最小。 4. 优先选择提供`demo`的包，有`demo`参考性更强，成功集成的概率也会越大。 5. 优先使用周下载量更高的包。`npmjs`对每个包都会有个周下载量的值，该值越大说明使用该包的用户越多，也就意味着其被更多的用户认同。 在第三包的使用过程中，应该本着先完成后完美的思想。先把组件跑起来，然后再逐步的优化，以达到自己理想的目标。 ## Notiflix 接下来我们以 Notiflix 为例，展示将其引入到当前项目中的步骤。 之所以选择 Notiflix，是因为它在刚刚提到的文章中处于第一个，相信效果肯定不会太差。接下来来到[https://www.npmjs.com/package](https://www.npmjs.com/package)，以 Notiflix 为关键字进行查找。  发现找到它的身影。这意味着它已被`npm`托管，所以不会太过时，安装起来应该也不会太难。 接着点击搜索的结果，来到 Notiflix 在 npm中的首页 [https://www.npmjs.com/package/notiflix](https://www.npmjs.com/package/notiflix)，按提示进行安装。 ### Npm i 在大多部的npm包的文件中，都会出现如下的安装方式： ```bash npm i xxx ``` 其实这里的参数`i`是`install`的简写，所以上述写法等同于`npm install xxx`。同时由于我们是团队开发，所以需要把自己当前依赖的第三方包以`配置文件`的形式共享给其它成员，这个`配置文件`也就是项目根目录下的`package.json`。而若想将安装`xxx`的信息自动添加到`package.json`中，则需要使用`-s`参数。所以如果得到的安装命令是`npm i xxx`，我们实际上执行的是： ```bash npm i xxx -s ``` 或者全称： ```bash npm install xxx --save ``` 当然了，如果你愿意使用：`npm i xxx --save`或`npm install xxx -s`也是完成可以的。 ### 安装 按文档的提示，安装 notiflix 的命令为：`npm i notiflix`。我们使用shell来到项目根路径，执行： ```bash npm i notiflix -s ``` 为与教程保持一致的效果，请使用以下命令来指定安装版本： ```bash npm i notiflix@3.0.1 -s ``` 安装结果如下： ```bash panjie@panjies-iMac first-app % npm i notiflix@3.0.1 -s + notiflix@3.0.1 added 1 package from 1 contributor, removed 1 package and audited 1473 packages in 8.805s 84 packages are looking for funding run `npm fund` for details found 478 vulnerabilities (88 moderate, 389 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details ``` ## 使用 第三方包的使用方式大体上分为两种，第一种即我们在前面引入`bootstrap`的方式：将特定的`js`、`css`文件放到`angular.json`的特定位置上。这是一种通用的作法，适用于引入所有的第三方包。 但如果当前包支持`import`引用，则完全不需要那么麻烦，比如当前 notiflix 在文档中便明确的说明，可以使用`import`来引入。 ```typescript +++ b/first-app/src/app/student/student.component.ts @@ -3,6 +3,7 @@ import {Page} from '../entity/page'; import {Student} from '../entity/student'; import {StudentService} from '../service/student.service'; import {environment} from '../../environments/environment'; +import {Confirm} from 'notiflix'; @Component({ selector: 'app-student', ``` 同引入`environment`的作用完全一致，引用了`Confirm`后，便可以在组件中使用`Confirm`了。随即参考官方文档[https://www.notiflix.com/#Confirm](https://www.notiflix.com/#Confirm)将学生列表组件的`delete`方法改写为： ```typescript onDelete(index: number, id: number): void { console.log(Confirm); Confirm.show('请确认', '该操作不可逆', '确认', '取消', () => { this.studentService.delete(id) .subscribe(() => this.pageData.content.splice(index, 1)); }, () => { console.log('cancel'); }); } ``` > 在学习教程时，可能由于notiflix官方更新的原因，导致教程的方法与官方文档不一致。 此时再次点击删除按钮，将在控制台中打印`Confirm`：  在控制台中查看该`Confirm`的类型是个对象，该对象中存在4个可用的方法，可以的一个`show()`方法便是我们此次调用的。  该方法被调用后，一个清新的对话框便被成功的展示在了我们面前。 有人说老师你怎么就知道`Confirm.show()`方法的各个参数都代表什么，我想说在没有看官方文档之前，我也不知道。另外除了可以看官方文档以外，还可以借助IDE按往`ctrl`后点击`show`方法，进行跳转到`Confirm.show()`的源代码，如果源代码写的好，那么也可以很轻松的获取到各个参数的意思。  当然了，你也可以懒到啥都不看，多尝试几次也可以蒙出来。 ### 本节作业 还等什么，赶快尝试引用一下其它的第三方对话框库吧。 ## 总结 相较于在`angular.json`添加各种配置来引用第三方库，这种使用`import`引入的方式的确是太棒了！ ## 上节参考答案： C层： ```typescript +++ b/first-app/src/app/student/student.component.ts @@ -33,6 +33,11 @@ export class StudentComponent implements OnInit { } onDelete(index: number, id: number): void { + const result = confirm('确认要删除吗?'); + if (result) { + this.studentService.delete(id) + .subscribe(() => this.pageData.content.splice(index, 1)); + } } ``` M层： ```typescript +++ b/first-app/src/app/service/student.service.ts @@ -28,6 +28,15 @@ export class StudentService { return this.httpClient.post<Student>('/student', student); } + /** + * 删除 + * @param id 学生ID + */ + delete(id: number): Observable<void> { + const url = '/student/' + id.toString(); + return this.httpClient.delete<void>(url); + } + ``` 对应单元测试： ```typescript +++ b/first-app/src/app/service/student.service.spec.ts @@ -26,6 +26,20 @@ describe('StudentService', () => { error => console.log('error', error)); }); + fit('delete', () => { + const id = Math.floor(Math.random() * 10); + let called = false; + service.delete(id).subscribe(() => { + called = true; + }); + // 由于HTTP请求是异步的，所以在短时间内还没有返回数据，called值仍然为false + expect(called).toBeFalse(); + + // 数据被手动返回后,called值为true + getTestScheduler().flush(); + expect(called).toBeTrue(); + }); + ``` | 链接 | 名称 | | ------------------------------------------------------------ | -------- | | [https://github.com/mengyunzhi/angular11-guild/archive/step7.5.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.5.1.zip) | 本节源码 |