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

【问题标题】：pass value change event through service in angular5通过angular5中的服务传递值更改事件
【发布时间】：2018-05-07 13:37:30
【问题描述】：

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

服务：

@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[] = [];

}

装修项目：

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

}

如何从 AccountRequestFilterService 引发和订阅事件或订阅 AccountRequestFilterService 中的 genderFilter 属性的值更改？

【问题讨论】：

标签： angular typescript angular5

【解决方案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..
})

编辑：这是额外的.. 根据 cmets 中的建议..

您也可以更新 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
}

【讨论】：

@user184994：哦，是的..那将是一个不错的地方。我会更新我的答案..
我认为它应该是 new Subject() 并且除了错过的分号之外，我设法让它工作。谢谢！
@WillemdeJong：是的，对.. 我错过了Array<FilterItem>。谢谢！

【解决方案2】：

每次修改该过滤器时，请使用字段 EventEmitter<GenderFilter> 并触发事件 (#emit)。任何有兴趣在过滤器更改时通知 beein 的实体，都可以像订阅任何其他 Observable

一样订阅该 emmiter

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

【讨论】：