导航时 Angular 4 取消订阅会导致错误

Question

我最近学会了避免内存泄漏，我需要在我的组件中取消订阅。为此，我实现了OnDestroy，但这在导航时引起了问题。

错误错误：未捕获（承诺）：TypeError：无法读取未定义的属性“取消订阅” TypeError：无法读取未定义的属性“取消订阅”

如果我不退订导航成功完成。

我的印象是 ngOnDestroy 只有在其他所有事情都完成后才会发生，显然情况并非如此。

我显然做错了什么，但我不知道导航离开页面时如何取消订阅？

export class PropertyFormMapperComponent implements OnInit, OnDestroy {
    private _routeSubscription: any;
    private _getPropertySubscription: any;

    constructor(
        private _route: ActivatedRoute,
        private _propertyFormFileService: PropertyFormFileService,
        private _router: Router
    ) { }

    ngOnInit(): void {
        this._routeSubscription = this._route.params.subscribe(params => {
            this._id = params['id'];
            this._getPropertySubscription = this._propertyService.getProperty(this._id).subscribe(property => {
                ...do stuff...
            });
        });
    }

    ngOnDestroy(): void {
        this._routeSubscription.unsubscribe();
        this._getPropertySubscription.unsubscribe();
    }

    private onCreate(event: any): void {    
        this._propertyService.postProperty(property, 1).subscribe(
            response => {
                ...do stuff...
                this._router.navigate(['home']);
            },
            error => {
                ...other stuff...
            }
        );
    }

}

Answer 1

在这里，这个应该适合你。我使用concatMap 和投影函数组合了路由参数流和getProperty 流。您可以在 rxjs 文档中了解更多信息：rxjs concatMap

我还使用takeUntil，它在其他流发出时取消订阅它通过管道传输的流。 rxjs takeUntil

所以当componentDestroyed$ observable 发出时，因为takeUntil 将其作为参数，takeUntil 将取消订阅this._route.params 和this._propertyService.getProperty 流。

我还添加了takeUntil 到onCreate 方法，因为你也在那里订阅。

takeUntil 是跟踪所有Subuscriptions 并在ngOnDestroy 中手动取消订阅它们的替代方法。使用takeUntil，我们可以实现相同的目标，但不必让组件与订阅属性混为一谈。

您可以更进一步，拥有一个所有组件类都继承自的基类 --> 然后您不必在每个组件中都保留componentDestroyed$，也可以跳过ngOnDestroy() 部分：

export abstract class BaseComponent implements OnDestroy {
    protected componentDestroyed$: Subject<void> = new Subject<void>();

    ngOnDestroy() {
        this.componentDestroyed$.next();
        this.componentDestroyed$.complete();
    }
}

您的组件现在将从BaseComponent 继承：

export class PropertyFormMapperComponent extends BaseComponent implements OnInit, OnDestroy

您的代码已修复：

import {Subscription} from 'rxjs';
import {tap, map, concatMap, takeUntil} from 'rxjs/operators';

export class PropertyFormMapperComponent implements OnInit, OnDestroy {
    componentDestroyed$: Subject<void> = new Subject<void>();

    constructor(
        private _route: ActivatedRoute,
        private _propertyFormFileService: PropertyFormFileService,
        private _router: Router
    ) { }

    ngOnInit() {
        this._route.params
            .pipe(
                map(params => params['id']),
                tap(id => this._id = id),
                concatMap(id => this._propertyService.getProperty(id))
                takeUntil(this.componentDestroyed$),
                tap(property => {
                   ...do stuff...
                   ... side effects are handled in tap functions     
                })
            )
            .subscribe();        
    }

    private onCreate(event) {    
        this._propertyService.postProperty(property, 1)
            .pipe(
                takeUntil(this.componentDestroyed$)
            )
            .subscribe(
                response => {
                    ...do stuff...
                    this._router.navigate(['home']);
                },
                error => {
                    ...other stuff...
                }
            );
    }

    ngOnDestroy() {
        this.componentDestroyed$.next();
        this.componentDestroyed$.complete();
    }
}