如何通过其他组件中的值进行管道转换？

问题描述

我正在尝试将组件中的数据共享到管道。据我了解，组件之间交换数据的最佳方法是通过具有某种Observable的服务。我选择使用BehaviorSubject，以防管道呈现的结果与预期不同并且在发出值时未进行订阅的情况。

我有一个组件复选框过滤器

html：

<input type="checkBox" [checked]="isChecked (change)="toggleFilter()" />

ts：

toggleFilter() {
  if (this.isChecked) {
    this.filterService.addFilter(this.value);
  }
  else {
    this.filterService.removeFilter(this.value);
  }
}

在filter.service.ts中，我利用string []，因为我的代码有点复杂，因为有一张BehaviorSubject 的映射，并且从checkBox-filter组件继承的组件可以添加到数组中通过键。为了我的问题，我没有将代码复杂化。

private filters = new BehaviorSubject<string[]>([]);

addFilter(value) {
  this.filters.next([...this.filters.value,value]);
}

subscribe(): Observable<string[]> {
  return this.filters.asObservable();
}

在filter.pipe.ts

private filters: string[];
private filteRSSubscription: Subscription;

constructor(private filterService: FilterService) {
  this.filteRSSubscription = this.filterService
    .subscribe()
    .subscribe((filters) => {
      this.filters = filters;
    });
}

transform(value: unkNown): unkNown {
  console.log(
    `transform filters: ${this.filters}`
  );

  return value;
}

ngOnDestroy(): void {
  console.log('filter ngOnDestroy');
  this.filterSubscription.unsubscribe();
}

出于某些原因，我认为我必须这样做有误。

• 我找不到很好的例子，如果这是正确的方法，这似乎很普遍。
• 我保留了控制台日志，并且在硬刷新页面后，没有看到ngOnDestroy消息被记录。
• 使转换生效的唯一可能方法是设置pure：false。

有更好的方法吗？如果正确，那么我列出的最后两个原因如何？

解决方法

1. 如果您的服务使用providedIn: 'root' ngOnDestroy有点用处，那么如果您的服务例如具有组件范围。每次刷新时，所有角度对象都会被破坏。

2. 如果您采用pure: false的方式，则不需要订阅，只需将filters添加为服务文件，然后直接在transform中使用此字段。或者，您可以添加过滤器作为管道参数，但随后需要在任何地方指定它。

3. 另一种方法是不使用管道并制作一些组件/指令<my-component value="...">，然后您需要Observable，并且每个这样的组件将在ngOnDestroy中进行订阅和取消订阅。