为什么 angular 订阅多次？

Question

我有这个结构：

• 产品.服务（用于服务）
• product-search 组件（用于设置当前选中的对象）
• compare-product 组件（用于订阅当前选中的对象）

每当加载比较产品时，我都想订阅服务中的对象。乍一看还好。但是，当我点击产品搜索的后退按钮，然后再次加载比较产品时，它订阅了两次。当我再次返回加载时，它被调用了3次。返回，再次加载，调用四次，依此类推。

这些是代码：

服务：

//product.service
.......
private checkedSrc = new BehaviorSubject([]);
currentChecked = this.checkedSrc.asObservable();

.......
setChecked(checked: string[]){
    this.checkedSrc.next(checked);
}

resetChecked(){
    this.checkedSrc.next([]);
}
.......

产品搜索组件：

......
compare(){
    this.products_valid = true;
    this.productSvc.setChecked(this.checked);
    this.router.navigate(['compare']);
}
......

比较产品组件：

...
products: string[];
isLoading: boolean = true;

constructor(
  private productSvc: ProductsService
) { }

ngOnInit() {
  this.productSvc.currentChecked.subscribe(p => {this.products = p; console.log(this.products)})
}

我在没有导航到比较组件的情况下尝试了它。当我第一次调用比较函数时，它订阅了一次，再次调用比较它订阅了两次，再次调用它订阅了三次，依此类推。

......
compare(){
    this.products_valid = true;
    this.productSvc.setChecked(this.checked);
    this.productSvc.currentChecked.subscribe(p =>{console.log(p);})
}
......

调用它的按钮：

<div class="row">
  <div class="col-md-6">
    <button class="btn btn-primary" style="margin-top: 20px;" (click)="compare()">Compare</button>
  </div>
</div>

每次调用比较方法时，我也尝试使用 resetChecked() 重置对象，但仍然相同...

Answer 1

当组件被销毁时，您需要取消订阅 observable。每次加载组件时，您都有 1 个订阅。

Answer 2

每当您致subscribe电源时 -checkSrc在这种情况下 - 都会被告知新订阅者想要获取数据。消息来源不知道您何时离开页面，它仍会跟踪一位订阅者。当您返回时subscribe再次调用，现在源有两个订阅者。

您有多种选择来解决问题。第一个是在ngOnDestroy方法中取消订阅：

subscription;

ngOnInit() {
  this.subscription = this.productSvc.currentChecked.subscribe(p => {this.products = p; })
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

更好的选择是使用async管道。

ngOnInit() {
 this.products = this.productSvc.currentChecked();
}

在你的 HTML 中：

<ul>
  <li *ngFor="let product of products | async">{{product.name}}</li>
</ul>

如您所见，this.products不再指产品，而是指产品流。为了在您的模板中使用，您需要添加async管道。一个优点是您不需要自己订阅和取消订阅。