Question

使用Angular我有一项服务，可以共享来自不同组件的一些变量。像这样：

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
@Injectable()
@Injectable({
  providedIn: "root"
})

/**
 * Service to manage all the global variables in order to use it in different components
 */
export class SharedService {

  // Global variable of the path 
  private rPathSource = new BehaviorSubject(""); // Set up the source
  currentRPath = this.rPathSource.asObservable(); // Make it Observable

 constructor() {}

  /**
   * Function to change the global path from a component
   * @param path string of the path of the R Folder for the result of the ML
   */
  changeRPath(path: any) {
    this.rPathSource.next(path);
  }
}

然后从一个组件中订阅它。像这样： 组件1

constructor(private shared: SharedService) {}

ngOnInit() {
    this.shared.currentRPath.subscribe(RPath => {
      this.currentRPath = RPath;
      // HERE I DO A GET REQUEST
    });
  }

然后从另一个组件中更改变量，如下所示： 组件2

this.shared.changeRPath("");

我有一个带一些按钮的sidenav栏，每个按钮都会更改url和加载了ng内容的组件。

<ng-content></ng-content>

当我按下按钮以在组件1上重定向时，我选择了该变量，并完成了get请求。一切都很好。

问题是当我按下按钮以在组件2上重定向时，共享变量发生了变化，并且由于我怀疑在组件1上它再次执行了get请求。的确，get请求位于订阅的回调中。

但是奇怪的是，由于组件1是组件2，因此不再加载组件1。它不应该在组件更改时被破坏吗？

Answer 1

您一定不要忘记取消订阅，以免这些悬挂的订阅中出现内存泄漏。

有两种方法可以做到这一点：

使用export class MyComponent implements OnDestroy, OnInit { private readonly destroyed = new Subject<void>(); constructor(private readonly shared: SharedService) {} ngOnInit() { this.shared.currentRPath.pipe(takeUntil(this.destroyed)).subscribe(/*...*/); } ngOnDestroy() { this.destroyed.next(undefined); this.destroyed.complete(); } }：
```
const mySubscription = this.shared.currentRPath.subscribe(/*...*/);
mySubscription.unsubscribe(); // when done.
```

取消订阅（当您有一个订阅时有用）：

   var integer = "";
   $("#selectFirst").on('change',function(){
          integer=$(this).attr('selected','selected').val();
          $("#text1").html(integer);
        })

Angular-共享服务订阅的行为

1 个答案: