无法读取属性'添加'。 Rxjs订阅

Question

我开始优化我的代码，我想取消订阅ngOndestroy中的订阅。我有多个订阅。问题是当我想调用add（）方法添加额外的子订阅时，它说无法读取未定义的属性'add'。我在这里简化了我的代码，所以你只能看到重要的东西。

import {Subscription} from 'rxjs';

export class DashboardComponent implements OnInit, OnDestroy {
     private subscription: Subscription;
}

ngOnInit() {
   this.getData();
   this.getFeed();
}

ngOndestroy {
if (this.subscription) {
   this.subscription.unsubscribe();
   console.log(this.subscription);
   }
}

getData() {
   const subscription = this._authService.currentCompanyId.subscribe((newCompanyId) => {
            this.driverSubs(newCompanyId);
            this.vehicleSubs(newCompanyId);
        });
        this.subscription.add(subscription);
    }

   driverSubs(newCompanyId) {
        const subscription = this._driversService.getAllDrivers(newCompanyId).subscribe((data) => {
            this.getDataForDrivers(data);
        });
        this.subscription.add(subscription);
    }

    vehicleSubs(newCompanyId) {
        const subscription = this._vehiclesService.getAllVehicles(newCompanyId).subscribe((data) => {
            this.getDataForVehicles(data);
        });
        this.subscription.add(subscription);
    }
}

getFeed() {
    this.feedSubs();
    this.feedTachoSubs();
}

feedSubs() {
    const subscription = this._feedService.getFeed().subscribe(response => {
        this.feed = response;
    });
    this.subscription.add(subscription);
}

feedTachoSubs() {
    const subscription = this._feedTachoService.getFeedForVehicles().subscribe(response => {
        this.feedTacho = response;
    });
    this.subscription.add(subscription);
}

Answer 1

正如Daniel所说，你的类成员必须是一个订阅数组来处理所有这些订阅。

除了他的回答，我建议尽可能使用“异步管道”，因此角度将自行取消订阅。

Answer 2

你的领域不应该是private subscription: Subscription;但是：

private subscriptions: Subscription[] = [];

- >即阵列。然后您将使用以下内容添加订阅：

this.subscriptions.push(subscription)

在ngOnDestroy中，您必须迭代该数组并取消订阅每个订阅：

for(const subscription of this.subscriptions) {
    subscription.unsubscribe();
}

Answer 3

另一种解决方案 - 尽管丹尼尔的答案是诀窍，但他持有一系列不同的Subscription对象。 如果您只想持有一个订阅，并且每当您取消订阅时，您希望所有订阅也取消订阅。 你只需创建它。

private subscriptions: Subscription;

然后，在构造函数中初始化对象：

this.subscriptions = new Subscription();

然后你可以使用：

this.subscriptions.add( ... Your subscription... );

当你想取消订阅时：

if(this.subscriptions){
  this.subscriptions.unsubscribe();
}

并且所有子订阅都会取消订阅。 --- 当您尝试.add（）订阅时，您的主要订阅未定义，这就是您无法添加新订阅的原因。