Angular-如何最好地处理服务及其订阅中的主题?

时间:2019-02-20 19:41:57

标签: angular rxjs angular-services

我是ar rcv /path/to/lib/mylib.a /path/to/mod_files/module.o的新手,所以我可能不像经验丰富的用户那样使用它。

我也在使用rxjs 5.1.0。

我有一个服务,其中有一个名为rxjs的{​​{1}}和一个来自BehaviorSubject的可观察对象名为file$

file$

将这些作为成员变量感到有点奇怪。

这是正确的还是我可以做得更好?

然后在组件files中,我订阅了@Injectable() export class UploadService { files$: BehaviorSubject<FileToUpload[]> = new BehaviorSubject([]); files: Observable<FileToUpload[]> = this.files$.asObservable(); 观察者:

onInit

yt 我正在files上取消订阅:

  ngOnInit() {
    this.fileStateSubscription = this.uploadService.files.subscribe((files) => {

这是正确的吗?我担心内存泄漏等问题,应该以某种方式ngDestroy ngOnDestroy() { this.fileStateSubscription.unsubscribe(); }

我无法从unsubscribing的{​​{1}}退订,或者至少我会想一些如何再次挂起订阅的步骤,但是由于它是成员变量,因此会引起问题。

每次进入此组件我都应该订阅和取消订阅吗?

2 个答案:

答案 0 :(得分:1)

要点1:拥有这样的成员变量感觉很奇怪:

我个人更喜欢以下语法,并且在较大的项目中也看到了它:

export class foo {
  private foo$$ = new BehaviorSubject(false);
  public foo$ = this.foo$$.asObservable();
}

$$用于主题和其他交互的Observables,$用于可订阅的纯Observables

第2点:在服务内订阅

您的服务将没有ngOnDestroy(仅当您仅为一个组件提供它),因此不仅是因为这个原因,还请不要订阅 >内部服务。您可以这样做,但是因此您需要对服务的工作方式及其在模块内部的生命周期有更深入的了解。

第3点:在哪里订阅以及如何订阅?

现在您的服务应该提供一个或多个公共可读的可观察到的信息,并且已经被映射/过滤/ ....并且可以-订阅。因此,您可以将服务注入到您选择的组件中(您需要数据的地方)。然后在组件中,有两种订阅/取消订阅管理方式。

我不确定此功能是否可用于rxjs 5.5,但请尝试一下:

class foo {

  private subscription = new Subscription();
  constructor(private yourService: YourService) {}
  ngOnInit() {this.subscriptions.add(this.yourService.observable$.subscribe(val => 
  console.log(val)}
  ngOnDestroy() {this.subscriptions.unsibscribe()}
}

路途较长,但路途较长

为每个Observalbe创建一个Subscription的私有实例

private observableSubscription;
constructor(...){}
ngOnInit() {this.observableSubscription = yourService.observable$.subscribe(...)}
ngOnDestroy() {this.observableSubscription.unsubscribe()}

答案 1 :(得分:0)

如果您订阅的每个可观察对象不能及时完成,则应取消订阅(您可能想查找的冷热可观察对象,快速的Google搜索将为您提供多个博客)。如果您自己托管主题,则绝对应该退订。

具有这些成员变量(如果可以的话),您可能希望对文件进行观察时使用getter。我对约定不太确定,但是我认为files变量的末尾也应该有一个$。

取消订阅的方式是一种正确的取消订阅的正确方法,特别是如果您 在一个组件中有多个订阅就是使用takeUntil这样的:

export class YouComponent implements OnInit, OnDestroy {
private unsubscribe$: Subject<void> = new Subject<void>();

constructor(private yourService: YouService) {}

ngOnInit(): void {
    this.yourService.getFiles().pipe(takeUntil(this.unsubscribe)).subscribe(() => // some code)
    this.yourService.getOtherFiles().pipe(takeUntil(this.unsubscribe)).subscribe(() => // some code)
}

ngOnDestroy(): void {
    this.unsubscribe.next();
    this.unsubscribe.complete();
}
}

这样,当this.unsubscribe发出时,您将取消订阅所有可观测对象。

我刚刚读到您没有管道: 我记得您可以使用

yourService.getFiles().takeUntil(this.unsubscribe).subscribe()

代替