Angular：防止资产文件夹发生更改时自动重新编译

Question

我正在尝试在 Angular 项目的资产中下载从 Spring Boot 生成的文件。当我从 Angular 服务调用 Spring API 时，Angular CLI 在资产 Angular 文件夹中创建文件后重新编译项目，然后在从 Spring Boot API 获取响应之前重新加载页面。

我尝试通过多种方式从 Angular 调用 Spring Boot API：

• 在我的组件的 ngOnInit() 中调用 api
• 在我的组件的构造函数中调用api
• 在单独的函数中调用 api
• 在下载功能中使用异步等待

我不知道如何继续

弹簧靴

 @GetMapping(path = "/downloads/{fileId}", produces = "application/json")
    @ResponseBody
    public ResponseEntity<String> download(@PathVariable String fileId){
        Gson gson = createGson();

        List<com.bioimis.blp.entity.File> fileById;

        try {
            fileById = fileRepository.findFileById(fileId);

        } catch (Exception e) {
            logger.error(e.getMessage());
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }

        if (fileById.isEmpty()) {
            logger.error(fileId + " not found");
            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
        }

        if(fileById.get(0).getDeletionDate() != null) {

            List<String> phrases = new ArrayList<>();

            try {
                phrases = translationRepository.getAllTranslationsByFileId(fileById.get(0).getId());
            } catch (Exception e) {
                logger.error(e.getMessage());
                return ResponseEntity.status(HttpStatus.OK).body(null);
            }

            String file = "";

            for (int i = 0; i < phrases.size(); i++) {
                file = file.concat(phrases.get(i));
            }
            file = file.concat("\0");

            /*Suppongo che prima dell'estensione gli ultimi 5 caratteri del file sono in formato 'languageCode_countryCode'*/
            String nameFile = fileById.get(0).getPath().split("/")[fileById.get(0).getPath().split("/").length - 1];

            Language language;
            try {
                language = languageRepository.findLanguageById(fileById.get(0).getLanguageId()).get(0);
            } catch (Exception e) {
                logger.error(e.getMessage());
                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
            }

            int i = StringUtils.lastIndexOf(nameFile, '.');
            String ext = StringUtils.substringAfter(nameFile, ".");

            nameFile = nameFile.substring(0, i - 5) + language.getLanguageCode() + "_" + language.getCountryCode() + "." + ext;

            Path path = Paths.get(pathDownload + "/" + nameFile);

            try {
-----------------------------------------------------------------------------
                Files.write(path, file.getBytes());
------------>after this instruction, angular reloads the page<---------------
-----------------------------------------------------------------------------
            } catch (IOException e) {
                logger.error(e.getMessage());
                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
            }

            return ResponseEntity.status(HttpStatus.OK).body(gson.toJson(path.toString()));
        }

        return ResponseEntity.status(HttpStatus.OK).body(null);
    }

角度组件

 downloadFile(fileId: string) {
    let link: string;

    this.http.downloadFile(fileId).subscribe(
      data => {
        link = data;
      }
    );

    console.log(link);
    return link;
  }

角度服务

downloadFile(fileId: string) {
    const myheader = new HttpHeaders().set('Authorization', this.token);
    return this.http.get<string>(this.url.concat('files/downloads/' + fileId), { headers: myheader });
  }

我只是希望在不重新加载角度组件的情况下从 spring boot api 获得响应。

（在邮递员中它可以正常工作）

Answer 1

这根本不起作用有两个原因：

• 在 HTML 组件模板中绑定函数会导致无限循环，这是一种不好的做法。
• 在 Angular 中的静态文件夹中的资产中创建一个文件，因此每次该文件夹或在 angular.json 中的资产中链接的外部文件夹使用新文件进行更新时，它都会重新加载组件

我修改了我的下载函数，它通过响应返回文件的所有文本，然后我创建了一个 blob 文件 (https://stackblitz.com/edit/angular-blob-file-download?file=app%2Fapp.component.ts)，当用户单击下载按钮时，它将被下载。

Answer 2

启动 Angular 应用程序（而不是 ng serve）

ng serve --live-reload false

--liveReload=true|false是否在页面发生变化时重新加载页面，使用 live-reload。

默认值： true

Angular Commands

替代品

• ng serve --no-live-reload

• ng serve --live-reload=false

• 在 package.json 中创建命令为 "ng noreload" : "ng serve --live-reload=false"