javascript - 个人资料图片未跨组件更新 Angular 5

Question

我有一个弹出的更改个人资料图片模式，所以你上传图片按保存，应该发生的是个人资料图片在整个网站上更新，但没有发生，只有在你刷新个人资料图片后才会更新

个人资料图片更改模式的我的保存功能

save(): void {
    const self = this;
    this.saving = true;
    self._profileService.updateProfilePicture(input)
        .finally(() => { this.saving = false; })
        .subscribe(() => {
            const self = this;
            self._$jcropApi.destroy();
            self._$jcropApi = null;
            abp.event.trigger('profilePictureChanged');
            console.log('changed');
            this._userService.updateProfilePicture();
            self.close();
        });
}

因此，当用户按下保存时，它会上传图像，然后调用我的用户服务上的 updateProfilePicture 函数...

我的用户服务是这样设置的..

 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Subject } from 'rxjs/subject';


 @Injectable()
 export class UserService {
      private profilePictureSource = new Subject<any>();

      profilePicture = this.profilePictureSource.asObservable();

      updateProfilePicture() {
          this.profilePictureSource.next();
      }
 }

然后在组件中我要更改个人资料图片

 import { UserService } from '/userService'; 
 import { ProfileService } from '/profileService';

 export class ....

 profilePicture: any;

 constructor(
     private _userService: UserService,
     private _profileService: ProfileService
 ) { }

 ngOnInit() {
    // grab the profile picture on init
    this.userPic();
    // Listen for profile picture change
    this._userService.profilePicture.subscribe(result => { 
      this.userPic(); 
    } 
 }

userPic() {
  this._profileService.getProfilePicture().subscribe(result => {
    if (result && result.profilePicture) {
      this.profilePicture = 'data:image/jpeg;base64,' + result.profilePicture;
    }
  });
}

然后在我的 HTML 中

<img [src]="profilePicture" />

我试图注释掉 self.close(); 只是因为它导致了一个问题，比如它在调用服务之前就关闭了，但这并没有改变任何东西

编辑

当我使用 chrome 调试器时，我在所有函数和服务调用上都设置了断点。当我按下保存时，userService 函数触发了一个断点。但之后堆栈中没有其他函数被调用，我不确定为什么？

第二次编辑我按照 Abylay Kurakbayev 的回答进行了更改

 profilePicture = this.profilePictureSource.asObservable(); //from
 profilePicture = this.profilePictureSource; //to

但这并没有解决问题

编辑 3

这里是 getProfilePicture() 函数

getProfilePicture(): Observable<GetProfilePictureOutput> {
    let url_ = this.baseUrl + "/api/services/app/Profile/GetProfilePicture";
    url_ = url_.replace(/[?&]$/, "");

    let options_ : any = {
        method: "get",
        headers: new Headers({
            "Content-Type": "application/json", 
            "Accept": "application/json"
        })
    };

    return this.http.request(url_, options_).flatMap((response_ : any) => {
        return this.processGetProfilePicture(response_);
    }).catch((response_: any) => {
        if (response_ instanceof Response) {
            try {
                return this.processGetProfilePicture(response_);
            } catch (e) {
                return <Observable<GetProfilePictureOutput>><any>Observable.throw(e);
            }
        } else
            return <Observable<GetProfilePictureOutput>><any>Observable.throw(response_);
    });
}

编辑 4这是 processGetProfilePicture() 方法

protected processGetProfilePicture(response: Response): Observable<GetProfilePictureOutput> {
    const status = response.status; 

    let _headers: any = response.headers ? response.headers.toJSON() : {};
    if (status === 200) {
        const _responseText = response.text();
        let result200: any = null;
        let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
        result200 = resultData200 ? GetProfilePictureOutput.fromJS(resultData200) : new GetProfilePictureOutput();
        return Observable.of(result200);
    } else if (status !== 200 && status !== 204) {
        const _responseText = response.text();
        return throwException("An unexpected server error occurred.", status, _responseText, _headers);
    }
    return Observable.of<GetProfilePictureOutput>(<any>null);
}

编辑 5

我想知道是否有办法强制刷新 userPic() 函数所在的组件？因为刷新页面后个人资料图片会立即更新？？

谢谢

Answer 1

据我所知，UserService 是如何在提供者中声明的？

In order to check this

1. UserService 构造函数中的一个 console.log() 以查看该构造函数是否被多次调用
2. 还要检查您应该只有一个提供程序的组件中的提供程序。

You must have the same istance in order for this flow to work as you are describing it. If you have one instance across all components can you make a plunker or provide some access to the full implementation of the components.