Обновите изображение на боковой панели после отправки формы Angular 2

Question 1

У меня следующая настройка: папки Layout и Routes, Layout состоит из боковой панели, на которой я показываю изображение пользователя, а Routes состоит из всех страниц, которые я показываю на выходе маршрутизатора.

У меня есть страница внутри папки Routes, куда я загружаю новое изображение, и после отправки этой формы я хочу одновременно показать новое изображение на боковой панели. На данный момент он отображает изображение после перезагрузки страницы, но это не то поведение, которое мне нужно.

Я даже попытался создать компонент, содержащий это изображение в общей папке и отображающий там 2 изображения, одно с текущим изображением пользователя (или по умолчанию), а другое, если пользователь загружает новое изображение, но я не мог заставить его работать.

У кого-нибудь есть предложения / примеры того, что попробовать?

Не могу скопировать код, так как понятия не имею, что делать, идея заключается в том, чтобы как-то перезагрузить компонент боковой панели только после отправки. Здесь ловите идеи.

Как вызвать событие, которое немедленно изменит мое изображение, когда я отправлю форму с новым изображением?

angular

0

Nemanja G 20 Июл 2017 в 14:02

Answer

Напишите общую службу, которая будет иметь поле для хранения имени файла с двумя методами для возврата значения поля и его обновления (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;
    }

1

Vega 20 Июл 2017 в 15:12

Как вызвать событие, которое изменяет изображение в компоненте боковой панели, из моего компонента маршрутов? Его нужно изменить, когда я отправляю форму, а не на странице перезагрузки.

–

Nemanja G

20 Июл 2017 в 14:46

Question 2