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

Question

这里我正在更改一个组件中的一些数据，例如：更改一个模块的用户个人资料图片，并且相同的个人资料图片应该反映在其他模块的另一个组件中。这些不是 parent/child 组件。因此，我正在导入模块和特定组件。调用组件的函数，该函数分配个人资料图片的范围值。该功能被触发并更改 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。) 当 组件 1 更新用户配置文件 URL，更新 user-service 中的用户。确保这两个组件都订阅了 user-service 中的用户。这样 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;
      });
  }

}

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

Changes done in one component view doesn't reflect in another component view in angular 4

provider

views

angular2-changedetection

angular