Angular 5 - передача данных от одного компонента к другому при отправке

Question

В Angular5 я хочу передать значение от одного компонента другому компоненту (одноуровневый).Для этого я создал общий сервис, как показано ниже:

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class DataService {

    private data = {};

    constructor() { }

    setOption(option, value) {
        this.data[option] = value;
    }

    getOption() {
        return this.data;
    }
}

В компоненте № 1 я написал следующее:

onSubmit(form: NgForm){
  this._dataService.setOption('image', form.value.image);
}

В компоненте № 2 я хочу получитьзначение и хотите его утешить, как:

ngOnInit() {
 this.sharedData = this._dataService.getOption();
 console.log(this.sharedData.image);
}

Однако в консоли отображается undefined.

Answer 1

Вы можете использовать вместо наблюдаемого:

export class DataService {

    private data = new BehaviorSubject<any>({});
    // behavior subject will keep in mind the last value so if the parent
    // emit before the first component is mounted, it will not receive the value
    // subject would not that is the difference


   // private data = new Subject<any>(); <-- Arnaud Denoyelle's solution

    constructor() { }

    setOption(option, value) {
        const options = this.data.getValue();
        options[option] = value;
        this.data.next(options);
        // .next will emit a new value to every subscription
    }

    get option() {
        return this.data.asObservable();
    }
}

Используйте это так:

ngOnInit() {
 this.sub = this._dataService.option.subscribe(data => {
     this.sharedData = data; // each time option will change, sharedData will too
     console.log(this.sharedData);
 });
}

ngOnDestroy() {
   this.sub.unsubscribe(); // clear to avoid memory leak
}

Компонент 1 не изменится:

onSubmit(form: NgForm){
  this._dataService.setOption('image', form.value.image);
}

Answer 2

Попробуйте изменить data на BehaviorSubject или Subject (если вам не нужны предварительные данные), например:

private data = new BehaviorSubject<any>({});

Затем измените ваши setOption и getOption методы, чтобы использовать его:

setOption(value){
    this.data.next(value);
}

getOption(): Observable<any>{
   return this.data.asObservable();
}

Затем в компоненте # 2 подпишитесь на ваш Observable, возвращаемый getOption:

this._dataService.getOption()
.subscribe((data)=>{
    this.sharedData = data;
});

Только не забудьте отписаться от этого Observable через takeUntil rxjs или другими способами, чтобы избежать утечки памяти.