导航到同一页面后，无法订阅 NgOnInit 中可观察的表单控件 valueChanges

Question

我有一个使用不同参数导航到自身的页面。这使得 NgOnInit 不会再次执行。遗憾的是，在 NgOnInit 中，我订阅了一个 observable 来处理特定表单控件中的值更改。只要页面不导航到同一页面，这种方法就可以正常工作。示例：

ngOnInit() {
    ...
    this.myForm.control['stateId'].valueChanges.pipe(startWith(''), pairwise()).subscribe(
      ([old, new]) = {
        //do something with old and new values
      }
    );
    ...
}

之前，我在导航到同一页面后处理新参数时遇到了类似的问题，我通过这样做解决了它：

ngOnInit() {
  ...
  this.activatedRoute.params.subscribe(
    (param) => {
      //do something with param
    }
  );
  ...
}

如何订阅类似场景的 valueChanges 可观察值？

Answer 1

您可以创建一个订阅，它将存储表单更改订阅，如果存在，您可以取消订阅并重新订阅以使其正常工作！

private subscription!: Subscription;
private sub!: Subscription = new Subscription();

ngOnInit() {
  ...
  this.sub.add(
  this.activatedRoute.params.subscribe(
    (param) => {
        // check if subscription exists then unsubscribe
        if(this.subscription) {
            this.subscription.unsubscribe();
        }
        this.subscription = this.myForm.control['stateId'].valueChanges.pipe(startWith(''), pairwise()).subscribe(
          ([old, new]) = {
            //do something with old and new values
        });
    }

  ));
  ...
}
...

...
ngOnDestroy() {
    // sub always as a value so no need to check for undefined scenario
    this.sub.unsubscribe();
    // check if subscription exists then unsubscribe
    if(this.subscription) {
        this.subscription.unsubscribe();
    }
}