我有一个使用不同参数导航到自身的页面。这使得 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 可观察值?
您可以创建一个订阅,它将存储表单更改订阅,如果存在,您可以取消订阅并重新订阅以使其正常工作!
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();
}
}