Angular在ProfileImage Update上也会更新标头

Question

我正在尝试实现与配置文件页面上的标题用户图像相同的标题用户图像，在更改后立即得到更新。

当我插入一个

handleChange

它可以工作，但是每秒以5个休眠请求向服务器发送垃圾邮件。 配置文件和标题是两个分离的组件。

ngDoCheck() {
    this.readProfileData();
}

我将hideDefaultImage与html中的hidden选项一起使用，以查找是否有图片以及是否没有默认图片。我知道也有* ngIf但有问题，因为它总是在短时间内显示默认图像。

因此，当我在个人资料组件中更新新的个人资料图片并且标头也得到更新时，如何实现？

Answer 1

您应该创建一个服务，在服务内部创建一个rxjs Subject

import { Subject } from 'rxjs';    

.....

profileImageUpdate$ = new Subject<string>();

在个人资料组件中，每当您按以下方式更改个人资料图片时，都应发出图片的url / base64：

this.userService.getProfile()
  .pipe(first())
  .subscribe(
    userData => {
      this.profileImage = userData.profileimage;
      this.userService.profileImageUpdate$.next(this.profileImage);
    });

在标头组件中，subscribe位于OnInit中的主题：

ngOnInit() {
 this.userService.profileImageUpdate$.subscribe((profileImage) => this.profileImage = profileImage);
}

不要忘记在标头和配置文件组件中注入服务