Question

这里我面临的问题是，当我更改配置文件组件中的图像时，它不会在导航栏组件中进行更改。我在导航栏组件中获取图像数据，但它在html视图中没有变化。当我刷新页面图像正在变化在导航栏中：

export class navbarComponent implements OnInit{

   ImageObject:any =[];
    token: any = window.localStorage.getItem('app_token');

  constructor( public sanitizer: DomSanitizer) { }

  ngOnInit() {
     console.log("called");
      this.accountService.currentUser().subscribe(
        resval => {
            console.log(resval);
            if(resval.profilePic != undefined){
              this.ImageObject['bs64'] = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpeg;base64,'+resval.profilePic);
              this.ImageObject['uniqnm'] = resval.uniqueName;
              console.log(this.ImageObject);
            }
            else{
                this.ImageObject['bs64'] = '/assets/images/avatar-2.jpg';
                  this.ImageObject['uniqnm'] = "";
                  console.log(this.ImageObject);
            }

          },
        error=>console.log(Error),
        ()=>{

        });
      } 

in navbar html:

img [src]=ImageObject.bs64 width="30px;">

Answer 1

这取决于您处理组件的方式。

假设您从后端获取图片网址，并且您有两个组件：工具栏和个人资料图片转换器。

在你的换碟机中，当用户要求改变他的照片时，你应该

this.myService.ChangePP(newUrl).subscribe(data => {/* ... */});

在这种情况下，您只需更新数据库，而不是您的前端。

如果要更新工具栏，则必须通知组件您的图片已更改。

为此，您可以使用具有您可以订阅的主题的服务。更改图片后，您会通知观察者，您的图像会相应更改！

在角度4中 - 显示从一个组件到另一个组件的已更改图像

1 个答案: