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

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

1 个答案: