时间戳

首页 > 解决方案 > 使用 Angular 的可观察存储和组件输入

angular - 使用 Angular 的可观察存储和组件输入

问题描述

我使用 a 开发了一个自定义角度商店BehaviorSubject，我正在使用这样的：

export class UserFaceComponent {

    @Input()
    public id: any;

    public presence$: Observable<boolean>;

    constructor(private _store: Store) { }

    public ngOnInit() {
        this.presence$ = this._store
            .select(s => s.users.presences)
            .pipe(
                map(p => p.includes(this.id))
            );
    }
}

这样，当 store 发生变化时，presence$observable 会发出一个新值。它工作得很好，但是，id传递给组件的内容也可能会改变。假设页面上有一个用户列表，当用户选择其中一个时，它会更新一个selectedUserId传递给UserFaceComponent. 这将是与以前相同的组件，但id会进行更新。

这意味着我必须在我的组件中创建一个主题，订阅onChange钩子并在 id 更改时在这个主题上发出。然后，我必须将此 observable 与上面的 observable 合并，然后发出新值。

这可行，但它非常麻烦，我不想被迫为使用这种方法制作的每个组件执行此操作......我正在考虑一段时间，但我找不到另一个解决方案来解决这个问题...

标签： angularrxjsstore

解决方案

我多次遇到相同的要求，不幸的是，没有比您的方法更简单的解决onChange方案subject。我曾经读过有一个ObservableInput装饰器的建议，但它从未被实施。

除了您的方法之外，还有另一种方法可以做到这一点，它并不简单，只是不同。这种替代方法使用输入 getter 和 setter 而不是ngOnChanges生命周期挂钩来更新主题。

private _id: BehaviorSubject<string> = new BehaviorSubject<string>();
@Input()
set id(value: string) {
  this._id.next(value);
}
get id(): string {
 return this._id.value;
}

推荐阅读