Javascript Angular2如何更新其他组件中的图像

我有两个组件，一个是顶栏，另一个是配置文件管理页面

问题在于更新配置文件图像，它也应该从顶部栏标题更改。它只在页面上重新加载。我希望它立即播出

为此，我可以这样做，若我在顶栏组件中点击一个函数，并改变显示图像的变量。但我不知道如何才能做到这一点，我的意思是，如果在我的配置文件组件中更新图像，那么我如何调用顶栏组件的函数并更改变量的值

我尝试的是：

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

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

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

my profile.component.html:

@Component({


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

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

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

我希望在我的个人资料页面加载时，我会得到console.log（“在tets中”）；。请纠正我的错误，我如何才能做到这一点。谢谢你

---

我已经在我的配置文件组件中导入了顶栏组件

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

所以在你们班的某个地方，你们会这样做

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

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

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

---

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

所以在你们班的某个地方，你们会这样做

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

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

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

以下是工作部件。。这可能会帮助您，在这里标题图像与/从配置文件组件更改

标题组件：

@Component({


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

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

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

@组件({
选择器：“应用程序标题”，
模板：`
`
})
导出类HeaderComponent在Init上实现{
imgSrc；
构造函数（）{}
恩戈尼尼特（）{
此.setImage（{src:“http://files.softicons.com/download/system-
图标/氧气图标-
氧气/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 });
     }
  }

@组件({
选择器：“应用程序配置文件”，
模板：`
改变形象
`
})
导出类SearchComponent实现OnInit{
@Input（）imgUrl:string；
@Output（）重载父对象：EventEmitter=neweventemitter（）；
构造函数（）{}
ngOnInit（）{}
changeImage（）{
变量img=”https://encrypted-tbn0.gstatic.com/images?
q=tbn:AND 9GCQWVbaidv_srbwjvfyn7woinekrzs9xichdzk5ru86bkicxcaz”；
emit（{src:img}）；
}
}

以下是工作部件。。这可能会帮助您，在这里标题图像与/从配置文件组件更改

标题组件：

@Component({


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

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

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

@组件({
选择器：“应用程序标题”，
模板：`
`
})
导出类HeaderComponent在Init上实现{
imgSrc；
构造函数（）{}
恩戈尼尼特（）{
此.setImage（{src:“http://files.softicons.com/download/system-
图标/氧气图标-
氧气/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 });
     }
  }

@组件({
选择器：“应用程序配置文件”，
模板：`
改变形象
`
})
导出类SearchComponent实现OnInit{
@Input（）imgUrl:string；
@Output（）重载父对象：EventEmitter=neweventemitter（）；
构造函数（）{}
ngOnInit（）{}
changeImage（）{
变量img=”https://encrypted-tbn0.gstatic.com/images?
q=tbn:AND 9GCQWVbaidv_srbwjvfyn7woinekrzs9xichdzk5ru86bkicxcaz”；
emit（{src:img}）；
}
}

我会使用能够在图像更改上观看事件的服务我会使用能够在图像更改上观看事件的服务Hanks我认为您的解决方案非常完美，但是您能告诉我如何在imageSrc表单我的个人资料组件中传递值吗。谢谢你advance@NarendraVyas您可以了解我无法绑定到“imageSrc”，因为它不是“child”的已知属性，因为两者都是独立组件，并且顶部栏不是my-profile的子级。那么您要绑定到哪里呢？事实上，我有一个父仪表板，它有两个子顶部栏和my-profile。我已经在我的配置文件中导入了顶部栏谢谢，我认为您的解决方案是完美的，但是您能告诉我如何在imageSrc表单中传递我的配置文件组件中的值吗。谢谢你advance@NarendraVyas您可以了解我无法绑定到“imageSrc”，因为它不是“child”的已知属性，因为两者都是独立组件，并且顶部栏不是my-profile的子级。那么您要绑定到哪里呢？事实上，我有一个父仪表板，它有两个子顶部栏和my-profile。我已在我的个人资料中导入顶栏