Angular2如何更新另一个组件中的图像

Question

我有两个组件，一个是 top-bar，另一个是个人资料管理页面。

问题在于更新个人资料图片，它也应该从 top-bar header 中更改。它确实存在，但在页面重新加载时。我希望它是即时的。

为此，如果我在 top-bar 组件中点击一个函数并更改显示图像的变量，我就可以做到这一点。但是我无法弄清楚我该怎么做我的意思是如果图像在 my-profile 组件中更新，那么我如何调用 top-bar 组件的函数并更改变量的值。

我试过的是：

top-bar.component.ts :

@Component({


selector: 'top-bar',
  templateUrl: './top-bar.component.html',
})
export class TopBarComponent {
     @Output() myEvent = new EventEmitter();
       test()
    {
    console.log("in test");
    }
   }

my-profile.component.html:

<top-bar #modal></top-bar>
    <top-bar (myEvent)="modal.test()"></top-bar>

我预计在 my-profile 页面加载时我应该得到 console.log("in tets");。如果错了请纠正我，我怎样才能做到这一点。感谢

我已经在 my-profile 组件中导入了 top-bar 组件

Answer 1

我假设您的顶部栏组件中有一个图像元素。您需要为该组件创建一个输入，您将使用该输入将图像绑定到。

所以在你 class 的某个地方你会这样做。

export class TopBarComponent {
    @Input() imageSrc: string;
}

您将像这样在模板中使用它

<img [src]="imageSrc"></img>

Answer 2

这里正在工作 PLUNKER 组件。这可能会对你有所帮助，这里 header 图片已更改 with/from 配置文件组件

Header分量：

@Component({
             selector: 'app-header',
             template: `<header>
                       <img [src]="imgSrc"> 
                       <app-profile (reloadParent)="setImage($event)" 
                       [imgUrl]="imgSrc"></app-profile>
                       </header>`
      })
export class HeaderComponent implements OnInit {
   imgSrc;
   constructor() { }
   ngOnInit() {
   this.setImage({src: "http://files.softicons.com/download/system-
                 icons/oxygen-icons-by-
   oxygen/png/128x128/actions/format_font_size_less.png"});
 }
  setImage($event){
  this.imgSrc = $event.src;
  }
}

配置文件组件

@Component({
           selector: 'app-profile',
           template: `<div id="">
           <img [src]="imgUrl">
           <button (click)="changeImage()">Change Image</button>
           </div>`
   })
  export class SearchComponent implements OnInit {
  @Input() imgUrl: string;
  @Output() reloadParent: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }
  ngOnInit() {     }
  changeImage(){
       var img = "https://encrypted-tbn0.gstatic.com/images?
        q=tbn:ANd9GcQWVbaiDV_SRbWJJVfyn7wOinekRzs9xiCHdZK5RU86bkICXcaz";
        this.reloadParent.emit({src: img });
     }
  }

Angular2如何更新另一个组件中的图像

Angular2 how to update image in another component

javascript

typescript

angular2-forms

angular2-template