提交表单 Angular 2 后，侧边栏中的更新图像

Question

>我有以下设置：布局和路由文件夹，布局由我显示用户图像的侧边栏组成，路由由我在路由器插座中显示的所有页面组成。

我在 Routes 文件夹中有一个页面，我正在上传新图像，提交该表单后，我想同时在我的侧边栏中显示新图像。目前，它在我重新加载页面后显示图像，但这不是我需要的行为。

我什至尝试创建一个将该图像保存在共享文件夹中的组件，并在那里显示 2 张图像，一张带有当前用户图像(或默认(，另一张是用户上传新图像，但我无法让它工作。

有人对尝试什么有任何建议/示例吗？

无法复制代码，因为我不知道该怎么做，到目前为止的想法是仅在提交后重新加载侧边栏组件。在这里钓鱼的想法。

当我提交带有新图像的表单时，如何触发将立即更改我的图像的事件？

Answer 1

编写一个共享服务，该服务将有一个字段来保存文件名，并有两个方法来返回字段值并更新它(getter/setter(。将其注入两个组件(一个更新它，一个显示它(。从更新组件调用更新方法，并将文件名返回到显示组件。

我还没有测试，但通过一些调试和调整，这应该可以工作：

更新组件：

import {SharedService} from './app/shared.service'
..
constructor(private sharedService:SharedService){}
..
onSubmit(filename:string):void{
this.sharedService.update(filename);
}

侧边栏组件：

import {SharedService} from './app/shared.service'
..
constructor(private sharedService:SharedService){}
..
getImageFileName():void{
const fileName=this.sharedService.getFileName();
console.log(fileName);
}

和共享服务

...
private fileName:string;
..
getFileName():string{
return this.fileName;
}
updateFileName(fileName:string):void{
this.fileName=fileName;
}