передать событие изменения значения через службу в angular5

Question

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

Услуга:

@Injectable()
export class AccountRequestFilterService {

    public genderFilter: GenderFilter;

    constructor(private rest: RestService) {
        this.genderFilter = new GenderFilter();
    }

    public loadGenders(): Observable<GenderFilter> {
        return this.rest.get("/filter/getgenders")
            .map((result: Response) => this.genderFilter.genders = result.json());
    }

Половой фильтр:

export class GenderFilter {

    public genders: FilterItem[] = [];

}

Fitter Item:

export interface FilterItem {
id: number;
name: string;
show: boolean;

}

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

Answer 1

Внутри вашего сервиса, пожалуйста, создайте свойства, такие как:

private genderSource = new Subject<Array>();
genderSourceObservable = this.genderSource.asObservable();

Внутри loadGenders():

public loadGenders(): Observable<GenderFilter> {
    return this.rest.get("/filter/getgenders")
        .map((result: Response) => {
             this.genderFilter.genders = result.json()
             this.genderSource.next(this.genderFilter.genders);
             return this.genderFilter.genders;
        });
}

Тогда везде, где вы используете этот сервис ... добавьте этот код в ngOnInit()

this.accountRequestFilterService.genderSourceObservable .subscribe(() => {
     // do whatever you need here..
})

РЕДАКТИРОВАТЬ: Это дополнительные .. в соответствии с предложением в комментариях ..

Вы также можете обновить Observable внутри установщиков свойств. В вашем случае у вас есть свойство genders, поэтому создание сеттера для этого не выглядит хорошо для меня, но просто для полноты я добавлю это к ответу.

Скажем, у вас есть свойство _genders вместо genders, и вы создали для него свойство.

Что-то вроде:

set gender(value) {
    // setters could be useful validations.. restricting what value
    // you actually want  to set, etc..
    this._gender = value;
}

Чтобы вы могли обновить Observable в сеттере, например:

set gender(value) {
    this._gender = value;
    this.genderSource.next(this._gender); // or use the getter for gender
}

Answer 2

Используйте поле EventEmitter<GenderFilter> и событие пожара (#emit) при каждом изменении этого фильтра. Любой субъект, который заинтересован в получении уведомления о фильтре, может подписаться на этого эмитента, как и на любой другой Observable

https://angular.io/api/core/EventEmitter