多次调用 ngOnint() 服务方法内部

Posted 2023-03-13

【中文标题】多次调用 ngOnint() 服务方法内部

【英文标题】：Inside ngOnint() service method called more than once

【发布时间】：2020-04-24 23:40:35

【问题描述】：

  ngOnInit() 
    this.store.pipe(select(empReducer.getErrorStatus)).subscribe(err => this.Error = err);
    this.store.pipe(select(empReducer.getEmpInfo)).subscribe(res=> console.log('test'));

为什么控制台调用了不止一次？

【问题讨论】：

输出：测试测试测试

如果将subscribe(res=> console.log('test')) 替换为subscribe(res=> console.log(res))，会得到三个不同的字符串，还是相同的内容重复3 次？

我在 res 中有 2 个对象，但它被调用了两次以上

我不想多次打电话，可以吗？

【参考方案1】：

我只看到两种可能性：

empReducer.getEmpInfo 发射不止一次。

在您提供的代码中，有一个订阅，但在销毁时没有取消订阅（unsubscribe() 或takeUntil 模式）。如果组件被创建、销毁、再次创建（例如，用户转到另一个视图并再次返回），您将拥有两个或多个活动订阅。

【讨论】：

没错，请记住，可观察对象是流，因此它们可以发出多次。您可以在管道内使用例如take(1) 来限制它。

【参考方案2】：

如前所述，请检查回复以查看您订阅的内容。关于订阅，您可以使用此模式来确保在组件被销毁时取消订阅所有订阅。希望这可以帮助。

private _subscriptions: Subscription = new Subscription();

public ngOnInit():void 

  this._subscriptions.add(
    this.store.pipe(select(empReducer.getErrorStatus)).subscribe(err => this.Error = err)
    )
  );

  this._subscriptions.add(
    this.store.pipe(select(empReducer.getEmpInfo)).subscribe(res => console.log('test')
    )
  );


public ngOnDestroy(): void 
    this._subscriptions.unsubscribe();