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

Question

在这里，我正在更改一个组件中的一些数据，例如：更改一个模块的用户个人资料图片，并且相同的个人资料图片应该反映在其他模块的另一个组件中。这些不是父/子组件。 因此，我正在导入模块和特定组件。调用分配个人资料图片范围值的组件的函数。该功能被触发并且更改的 url 出现在控制台中，如果我在控制台中打印它。但没有反映在视图中。 我试过ChangeDetectorRef 和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;
 }
}

Answer 1

我建议您将 user 存储在某个服务（user-service）中。当 Component1 更新用户配置文件 URL 时，更新用户服务中的用户。确保两个组件都订阅了用户服务中的用户。这样 Component2 将始终看到与 Component1

相同的用户

示例代码

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;
      });
  }

}