0

使用 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 上重定向时，我订阅了变量并完成了获取请求。一切都很好。

问题是当我按下按钮在组件 2 上重定向时，共享变量会发生变化，因为我在组件 1 上订阅它会再次执行获取请求。确实，get 请求在 subscribe 的回调中。

但奇怪的是组件 1 不再加载，因为它是组件 2。当组件更改时它不应该被销毁？

4

1 回答 1

0

您一定不要忘记取消订阅以避免这些悬空订阅中的内存泄漏。

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

  1. 使用takeUntil：

    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();
  }
}

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

    const mySubscription = this.shared.currentRPath.subscribe(/*...*/);
mySubscription.unsubscribe(); // when done.
于 2018-08-16T19:02:24.703 回答