我正在使用ngxs状态管理。我需要取消订阅选择器还是由ngxs处理?
@Select(list)list$!: Observable<any>;
this.list$.subscribe((data) => console.log(data));
最佳答案
对于第一个示例,可以与Async pipe结合使用。异步管道将为您取消订阅:
在ts
文件中:
@Select(list) list: Observable<any>;
在
html
文件中:<ng-container *ngFor="let item of list | async">
</ng-container>
<!-- this will unsub automatically -->
但是,当您想使用实际的subscribe方法时,需要手动取消订阅。最好的方法是使用
takeUntil
:import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@Component({
selector: 'app-some-component',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss']
})
export class SomeComponent implements OnInit, OnDestroy {
private destroy: Subject<boolean> = new Subject<boolean>();
constructor(private store: Store) {}
public ngOnInit(): void {
this.store.select(SomeState).pipe(takeUntil(this.destroy)).subscribe(value => {
this.someValue = value;
});
}
public ngOnDestroy(): void {
this.destroy.next(true);
this.destroy.unsubscribe();
}
}
您可以对组件中的每个订阅使用
pipe(takeUntil(this.destroy))
,而无需为每个订阅手动添加unsubscribe()
。