Question

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

我建议您将用户存储在某些服务中（用户服务。）当 Component1 更新用户个人资料网址时，请更新用户服务中的用户。确保两个组件都在用户服务中订阅了用户。这样， 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;
      });
  }

}

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

1 个答案: