如何解决如何通过其他组件中的值进行管道转换?
我正在尝试将组件中的数据共享到管道。据我了解,组件之间交换数据的最佳方法是通过具有某种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
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();
}
出于某些原因,我认为我必须这样做有误。
有更好的方法吗?如果正确,那么我列出的最后两个原因如何?
解决方法
-
如果您的服务使用
providedIn: 'root'
ngOnDestroy有点用处,那么如果您的服务例如具有组件范围。每次刷新时,所有角度对象都会被破坏。 -
如果您采用
pure: false
的方式,则不需要订阅,只需将filters
添加为服务文件,然后直接在transform
中使用此字段。或者,您可以添加过滤器作为管道参数,但随后需要在任何地方指定它。 -
另一种方法是不使用管道并制作一些组件/指令
<my-component value="...">
,然后您需要Observable,并且每个这样的组件将在ngOnDestroy
中进行订阅和取消订阅。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。