Angular

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

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

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

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

退订（单次订阅时有用）：

const mySubscription = this.shared.currentRPath.subscribe(/*...*/);
mySubscription.unsubscribe(); // when done.

Angular - 共享服务订阅行为

Angular - Behavior of shared service subscribe

typescript

angular-ui-router

angular-lifecycle-hooks