为可观察类的属性分配新价值

Question

更新可观察值时，我有问题。我想使用此类创建一个过滤器：

export class TrackParams {
    sortBy: string = "";
    genreId?: number = null;
    minPrice = 0;
    maxPrice = 999.9;
    keyId?: number = null;
    minBpm = 0;
    maxBpm = 250;
    search?: string;
    isDraft: boolean = false;

    public constructor(init?:Partial<TrackParams>) {
        Object.assign(this, init);
    }
}

trackParams 获取任何参数，并将其仅分配给1个创建的对象。因此，我创建了一个仅与1个对象一起使用的服务，并具有用于过滤的参数。

export class TrackParamsService {
  trackParamsSource = new BehaviorSubject<TrackParams>(new TrackParams);
  trackParams = this.trackParamsSource.asObservable();
  constructor() { }

  getTrackParams() {
    return this.trackParams;
  }

  setTrackParams(value: TrackParams) {
    this.trackParamsSource.next(value);
  }
}

问题在于，我有多个独立组件来更改 trackParams 的属性值，并且我只能创建一个新的对象的 trackParams ，并覆盖具有默认值的其他属性。 例如，要更改 genreid ，我在下拉菜单中具有类型的组件，然后单击可与 trackparams genreid ：

constructor(private trackParams: TrackParamsService, private trackService: TrackService) { }

onClick(checked, genreId) {
    if (checked) {
      // Failed attemp
      // this.trackParams.trackParamsSource.pipe(
      //   map(tp => {
      //     tp.genreId = id}
      //     )
      // ).subscribe((tp) => {});
      this.trackParams.getTrackParams().subscribe(tp => {
        tp.genreId = id;
      });
    }
  }

我不想创建新的 ： > TrackParams 因为它会弄乱我的 trackService 我使用 trackParam 属性值显示轨道。做什么正确的方法是什么？

Answer 1

您可以让您的服务接受带有部分过滤器的更新调用：

export class TrackParamsService {
  trackParams$ = new BehaviorSubject<TrackParams>(new TrackParams);

  constructor() { }


  updateParams(newFilter: Partial<TrackParams>) {
    this.trackParams$.pipe(take(1).subscribe(currentVal => {
      this.trackParams$.next({...currentVal, ...newFilter})
    });
  }
}

然后从您的组件中订阅trackParams $（无需调用 asobservable（））：（

this.trackParamsService.trackParams$.subscribe(filter =>{
 // do something with the updated filter
}}

不要忘记避免避免

要更新任何组件的过滤器，您可以使用部分属性调用服务：

onClick(checked, genreId) {
  if (!checked) return;

  this.trackParamsService.updateParams({ genreId }}
}