在一个组件视图中完成的更改不会反映在角度4中的另一个组件视图中 [英] Changes done in one component view doesn't reflect in another component view in angular 4

问题描述

在这里，我要更改一个组件中的某些数据，例如:更改一个模块的用户个人资料图片，而相同的个人资料图片应反映在其他模块的另一个组件中.这些不是父/子组件. 因此，我正在导入模块和特定组件.调用组件的功能，该功能分配配置文件图片的范围值.如果我在控制台中打印该功能，则会触发该功能并在控制台中显示更改的url.但不能反映在视图中. 我尝试使用ChangeDetectorRef和this.ref.detectChanges();，但显示为

Here I am changing some data in one component ex: change user profile picture of one module and the same profile picture should be reflected in another component of some other module. These are not parent/child components. Hence I am importing the module and particular component. calling a function of the component which assigns the scope value of the profile picture. That function is triggered and changed url is appearing in console, If I print that in console. But not reflecting in View. I tried with ChangeDetectorRef and this.ref.detectChanges(); But it is giving error as

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

，还尝试使用Zone.run().
但这对我没有用.谁能帮忙.

and also tried with Zone.run().
But it didn't work for me. Could anyone please help.

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

推荐答案

我建议您将用户存储在某些服务(用户服务)中. strong> Component1 更新用户配置文件URL，在用户服务中更新用户.确保这两个组件在用户服务中都已订阅给用户.这样， Component2 总是会看到与 Component1

I would recommend you to store the user in some service (user-service.) When Component1 updates the user profile URL, update the user in the user-service. Make sure both the components are subscribed to the user in the user-service. This way the Component2 would always see the same user as 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中的另一个组件视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！