HiDocs
Search K

Appearance

1.使用策略模式结合管道，映射后端字段进行展示 ​

安全日志的详细信息，里面的字段是需要映射的！

策略模式结合管道写法的好处：不用写那么多if，因为每一个情况都对应不同的配置对象，至少需要4个if。

这里把item传入方法，直接根据item的值去对应的配置对象里面取值即可！

image-20231007165549109

2.使用获取请求头+正则的方式，得到后端请求头说明字段的文件重命名信息，然后我们自行赋值 ​

成功实现点击链接，下载后端返回的指定文件名字（包括后缀）的文件的效果

可能为zip，也可能为pdf或者doc单独的文件

image-20231012152137294

代码解读：创建a标签元素，js点击，触发文件的下载！

在js里面进行这种操作，主要是为了维护html代码的简洁，不让html和js过多地进行分离

js
aDownload(filename, link) {
    const DownloadLink: any = document.createElement('a');
    DownloadLink.style = 'display: none'; // 创建一个隐藏的a标签
    DownloadLink.download = filename;
    DownloadLink.href = link;
    document.body.appendChild(DownloadLink);
    DownloadLink.click(); // 触发a标签的click事件
    document.body.removeChild(DownloadLink);
}

这代码段是用于创建并触发一个隐藏的 <a> 标签，以便实现下载功能。让我们一步步解读代码：

  1. const DownloadLink: any = document.createElement('a');: 创建一个新的 <a> 标签元素，并将其赋给变量 DownloadLink。
  2. DownloadLink.style = 'display: none';: 设置该 <a> 标签的样式，将其显示方式设为 'none'，即隐藏该元素。这样用户就不会看到这个下载链接。
  3. DownloadLink.download = filename;: 设置下载属性，指定下载文件的名称为 filename。
  4. DownloadLink.href = link;: 设置下载链接的 URL，该链接指向要下载的文件或资源。
  5. document.body.appendChild(DownloadLink);: 将该 <a> 标签添加到文档的 <body> 元素中，这样它就成为了页面的一部分，但由于样式设置为隐藏，用户不会看到它。
  6. DownloadLink.click();: 触发 <a> 标签的点击事件，实际上触发了下载动作。
  7. document.body.removeChild(DownloadLink);: 下载完成后，将该 <a> 标签从文档中移除，以保持页面干净。

总体而言，这段代码用于动态创建一个隐藏的 <a> 标签，设置下载链接和下载文件的名称，然后模拟用户点击该链接来触发文件下载。完成下载后，将该 <a> 标签从文档中移除，以保持页面整洁。

3.使用组件独享的路由守卫实现跳转刷新 ​

bug的分析：主要是我们在新增或者编辑的时候需要跳转到其他的页面，进行一系列操作，然后再跳回这个列表页面的路由，跳回来想要实现自动搜索的话，就需要使用这种路由守卫的策略！

列表页面：

js
import { ActivatedRoute, Router, Params } from '@angular/router';

private route: ActivatedRoute,

ngOnInit() {
    //注意：下面的方法进行了订阅，逻辑是判断，是否从add页面跳转过来，如果是的话，就执行搜索方法
    // 获取路由参数
    this.route.params.subscribe((params) => {
        const sourceRoute = params['sourceRoute'];

        // 在这里可以根据 sourceRoute 执行不同的逻辑
        if (sourceRoute === 'previous-page') {
            // 执行您的方法
            this.fuzzySearch();
        }
    });
}

添加或者编辑页面：操作完成之后：

js
this.route.navigate(['/asset/manage/listTMT', { sourceRoute: 'previous-page' }]);