时间戳

首页 > 解决方案 > Angular 9 - 如何在不刷新页面的情况下调用 RestAPI？

angular - Angular 9 - 如何在不刷新页面的情况下调用 RestAPI？

问题描述

我正在使用具有用户注册表的 Angular CLI 9.0.7 开发一个 SPA 应用程序。用户注册后可以随时更改头像。为此，我创建了一个服务，该服务显示一个模式窗口，用户在其中选择他的图像，并且该服务在一个对象中返回图像。

然后将该图像发送到后端持久化，但是当调用 API Rest 时，页面会重新加载。

这是我的 HTML 文件：

<img 
    src="{{ imgProfile }}" 
    class="img-fluid img-thumbnail mx-auto" 
    (click)="onClickSelectNewImage()" 
/>

这是我展示模态服务的方法：

onClickSelectNewImage(): void {
    let currentImg: string = this.imgProfile;

    this.modalService.showModalInputImage('Profile', currentImg, this._id).subscribe(
        (img: IImagemBase64) => {
            this.onUpdateImage(img);
        },
        (error: any) => {
            console.log(error);
        }
    );
}

这是由模态服务返回的：

export interface IImagemBase64 {
    id: string;
    fileName: string;
    imageBase64: string;
}

这是 API 调用：

private onUpdateImage(img: IImagemBase64) {
  if (img && img.fileName) {
    this._userService.updateUserImage(img).subscribe(  // when this line is executed the page is reloaded - :/
      (success: ICommandResponse) => {
        const user: IUser = <IUser>success.data;
      },
      (error: any) => {
        console.log(error);
      }
    );
  }
}

这是后端服务调用：

public updateUserImage(request: IImagemBase64): Observable<ICommandResponse> {
  let url: string = `${this._url}/${request.id}/imagem`;

  return this._http.put<ICommandResponse>(url, request).pipe(take(1));
}

如何在不重新加载页面的情况下提交请求？

标签： angularobservable

解决方案

发生的情况如下：后端正在接收一个 base64 字符串，将图像转换并保存在 assets\images 文件夹中。事实证明，assets 文件夹中的图像是静态的，由捆绑包优化。当图像被放置在那里时，并且当我处于开发环境中时，角度会识别更改，编译，自动执行并重新加载应用程序以反映他的更改。

为了解决这个问题，图像必须保存在另一个位置，例如服务器上的文件夹或 CDN。

推荐阅读