[英]Angular2 how to update image in another component
我有两个组件,一个是顶部栏,另一个是个人资料管理页面。
问题在于更新个人资料图片时,它也应该从顶部栏标题中进行更改。 它可以,但是页面会重新加载。 我希望它能即时显示。
为此,如果我在顶部栏组件中单击一个函数并更改显示图像的变量,则可以执行此操作。 但是我无法弄清楚该怎么做,我的意思是,如果在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>
我希望在我的个人资料页面加载中,我应该得到console.log(“ in tets”);。 如果错误,请纠正我,我该如何解决。 谢谢
我已经在我的个人资料组件中导入了顶栏组件
我假设您在顶部栏组件中有一个图像元素。 您将需要为该组件创建一个输入,将其绑定到图像。
因此,您将在课堂上的某个位置执行此操作。
export class TopBarComponent {
@Input() imageSrc: string;
}
您将在模板中使用的模板
<img [src]="imageSrc"></img>
这是工作正常的PLUNKER组件。.这可能会对您有帮助,在这里头图像通过配置文件组件进行更改。
标头组件:
@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 });
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.