出现此问题的原因是可能在一个组件中多次向同一 subscription 订阅流中添加新的订阅,导致多个订阅相互冲突,影响程序的预期行为。可以在销毁组件时手动取消订阅。
示例代码如下:
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs';
@Component({ selector: 'app-subscription-example', templateUrl: './subscription-example.component.html', styleUrls: ['./subscription-example.component.scss'] }) export class SubscriptionExampleComponent implements OnInit, OnDestroy { subscription: Subscription = new Subscription();
ngOnInit(): void { this.subscription = this.subscription.add(this.getData1()); this.subscription = this.subscription.add(this.getData2()); }
ngOnDestroy(): void { this.subscription.unsubscribe(); }
getData1() { // logic for data 1 }
getData2() { // logic for data 2 } }
在上述代码中,我们创建了一个 Subscription 类型的 subscription 变量,并在 ngOnInit 中向其添加了两个新的订阅。注意,订阅的添加顺序应该与程序逻辑相一致。
然后,在 ngOnDestroy 生命周期钩子方法中手动销毁订阅,以避免出现多次订阅的问题。
这样,就可以解决 Angular 12 subscriptions 行为不符合预期的问题了。