Question

我们正在尝试编写一个对话框模式，我们正在使用Rxjs进行角度的组件通信以响应事件。以下是代码段

 public class ModelService{
    subject = new Subject();
    raiseOk(): void {
         this.subject.next({action: 'SUBMIT ... });
    }
    onOk(): Observable<any> {
       return this.subject.asObservable().pipe(
          filter(x => x.action=='SUBMIT'),
          map(x => x));
    }    
 }

 // Our modal dialog will invoke raiseOk() event when ok is clicked.

 // Assuming ModelService registered and injected into component
 export class Component{
     ngOnInit(): void{
         this.modelService.onOk().subscribe(x=> {
              console.log('ok clicked');
         });
     }
 }

一切看起来都很不错。但是，我们已经发现了一个错误。发生了什么，我们只是想出了当我们切换到其他路由并回到该路由时，我们注意到了（因为再次为组件运行了ngoninit）。正在创建新的可观察物，而旧的仍然存在。

如果现在切换，我们将有3个可观测值；如果现在切换，我们将有4个可观测值。该处理程序根据路由切换发射3次，4次甚至更多次。

我非常困惑，因为Angle的this.http.get()服务也已订阅，但没有像上面那样多次触发。我们有什么遗漏吗？任何帮助将不胜感激。

Answer 1

每次您浏览订阅都不会消失。每次返回相同的路径时，都会创建一个新的“订阅”。终止ngOnDestroy()钩上的订阅。

export class Component{
    sub: Subscription;
    ngOnInit(): void{
        this.sub = this.modelService.onOk().subscribe(x=> {
              console.log('ok clicked');
        });
    }

    ngOnDestroy() {
      if (this.sub) {
        this.sub.unsubscribe();
      }
    }
}

遍历路线可为每个ngoninit创建可观察项

1 个答案: