首页 文章

通过路线导航可以为每个ngoninit创建可观察量

提问于
浏览 次
0

我们正在尝试编写一个模态对话框，我们正在使用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次以上 .

我非常困惑，因为 this.http.get() angular的服务也有订阅，但它不像上面那样多次触发 . 我们错过了什么吗？任何帮助是极大的赞赏 .

angular rxjs

1 回答

  • 2

    每次你导航时你的订阅都不会消失 . 每当你回到同一条路线时，就会创建一个新的"subscription" . 杀死 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();
      }
    }
}
    回复于

相关问题