[英]Angular - Behavior of shared service subscribe
Using Angular I have a service to share some variable from different components. 使用Angular我有一个服务可以共享来自不同组件的一些变量。 Like this:
像这样:
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);
}
}
Then from a component I subscribe to it. 然后从组件中我订阅它。 Like this: Component 1
像这样: 组件1
constructor(private shared: SharedService) {}
ngOnInit() {
this.shared.currentRPath.subscribe(RPath => {
this.currentRPath = RPath;
// HERE I DO A GET REQUEST
});
}
And from another component I change the variable like this: Component 2 然后从另一个组件中更改变量,如下所示: 组件2
this.shared.changeRPath("");
I have a sidenav bar with some buttons and each button change the url and the component loaded with ng content. 我有一个带一些按钮的sidenav栏,每个按钮都会更改url和加载了ng内容的组件。
<ng-content></ng-content>
When I press the button to redirect on the component 1 I susbcribe to the variable and the get request is done. 当我按下按钮以在组件1上重定向时,我使用了该变量,并完成了get请求。 Everything is fine.
一切顺利。
The problem is when I press the button to redirect on the component 2 the shared variable changes and because I susbcribe on the component 1 it does the get request again. 问题是,当我按下按钮以在组件2上重定向时,共享变量发生了变化,并且因为我怀疑在组件1上它再次执行了get请求。 Indeed, the get request is in the callback of the subscribe.
实际上,get请求位于订阅的回调中。
But what is weird is that the component 1 is not load anymore because it is the component 2. It is not supposed to be destroyed when the component changes ? 但是奇怪的是,因为组件1是组件2,所以不再加载组件1。在组件更改时不应该破坏组件1吗?
You must not forget to unsubscribe to avoid memory leaks in these dangling subscriptions. 您一定不要忘记取消订阅,以免这些悬挂的订阅中出现内存泄漏。
Here are 2 ways to do that: 有两种方法可以做到这一点:
Use takeUntil
: 使用
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(); } }
Unsubscribe (useful when you have a single subscription): 取消订阅(在您进行单个订阅时很有用):
const mySubscription = this.shared.currentRPath.subscribe(/*...*/); mySubscription.unsubscribe(); // when done.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.