通过angular5中的服务传递值更改事件

时间:2018-05-07 13:37:31

标签: angular typescript angular5

我在服务中有一个属性,其中包含可在视图中更改的布尔值列表。当值更改时,使用相同服务的另一个组件应该对其执行操作并刷新数据。

服务:

@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项目:

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

}

如何在AccountRequestFilterService中提升和订阅来自AccountRequestFilterService的事件或订阅genderFilter属性中的genderFilter属性值?

2 个答案:

答案 0 :(得分:1)

每次修改过滤器时,请使用字段EventEmitter<GenderFilter>和触发事件(#emit)。任何对过滤器chage通知beein感兴趣的实体都可以像任何其他Observable

一样订阅该emmiter

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

答案 1 :(得分: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,所以制作一个setter对我来说看起来并不好,但为了完整性,我会将其添加到答案中。

假设您有一个属性_genders而不是genders,并且您为此属性设置了一个setter。

类似的东西:

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

所以你可以在setter中更新Observable,比如:

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