在一个组件视图中完成的更改不会反映在角度 4 中的另一组件视图中

在这里，我正在更改一个组件中的一些数据，例如：更改一个模块的用户个人资料图片，并且相同的个人资料图片应该反映在其他模块的另一个组件中。这些不是父/子组件。 因此我正在导入模块和特定组件。调用组件的函数来分配个人资料图片的范围值。如果我在控制台中打印该函数，则该函数会被触发，并且更改后的网址会出现在控制台中。但没有反映在视图中。 我尝试过ChangeDetectorRef and this.ref.detectChanges();但它给出的错误是

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for ChangeDetectorRef!
Error: No provider for ChangeDetectorRef!

并尝试使用 Zone.run() 。
但这对我不起作用。有人可以帮忙吗？

 constructor(private appHeaderComponent: AppHeaderComponent) { }


//component 1 sending data
uploadProfilePicture = (event) => {
 if (this.profileFormData) {
     this.headerService.savePhoto(this.profileFormData, 'profile-pictures').then((saveProfilePhotoData) => {
         if (saveProfilePhotoData['status_code'] === 200) {
             this.appHeaderComponent.getUserImage(saveProfilePhotoData['result']['pictures'][0]['imageUrl']);
         }
     });
  }
 }


//component 2 Receiving data
getUserImage = (image) => {
 if (image) {
     this.userImage = image;
 } else {
     this.userImage = sessionStorage.profilePicture;
 }
}

我建议您存储user在某些服务中（用户服务.) When 组件1更新用户配置文件 URL，更新用户服务中的用户。确保这两个组件都已在用户服务中订阅给用户。这样一来组件2总是会看到相同的用户组件1

示例代码

export class UserService {

   public userReplaySubject = new ReplaySubject<User>(1);

   setUser(u: User){
     this.userReplaySubject.next(u);
   }
}

export class Component1 { 

  user: User;

  constructor(private userService: UserService) {
      // Will always have the latest user in the service
      this.userService.userReplaySubject.subscribe(user => {
         this.user = user;
      });
  }

  updateUserProfile(){
    //when the profile-url changes, update the user service
    this.userService.setUser(user);
  }
}


export class Component2 { 

  user: User;

  constructor(private userService: UserService) {
      // Will always have the latest user in the service
      this.userService.userReplaySubject.subscribe(user => {
         this.user = user;
      });
  }

}