100

我发现了很多ActivatedRouteObservable 喜欢params或url订阅但未取消订阅的示例。

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params
    // (+) converts string 'id' to a number
    .switchMap((params: Params) => this.service.getHero(+params['id']))
    .subscribe((hero: Hero) => this.hero = hero);
}
  • 路由对象和订阅是否会自动销毁并为每个组件创建新创建？
  • 我是否必须关心退订那些Observables？
  • 如果不是，您能否解释一下Router. routerState?
4

5 回答 5

199

从文档：

当订阅组件中的 observable 时，您几乎总是安排在组件被销毁时取消订阅。

有一些特殊的 observables 是不必要的。ActivatedRoute 可观察对象属于例外。

ActivatedRoute 及其 observables 与 Router 本身是绝缘的。当不再需要路由组件并且注入的 ActivatedRoute 随之消亡时，Router 会销毁路由组件。

无论如何，请随时取消订阅。这是无害的，绝不是坏习惯。

于 2016-12-28T09:32:04.157 回答
10

正如获奖答案自动引用subscriptionsto ，ActivatedRouteAngular一样unsubscribes。

当不再需要路由组件并且注入的 ActivatedRoute 随之消亡时，Router 会销毁路由组件。

如果您想知道如何unsubscribe从Observables：

import { Component, 
         OnInit,
         OnDestroy }      from '@angular/core';
import { ActivatedRoute } from '@angular/router'; 
// Type
import { Subscription } from 'rxjs/Subscription';


@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit, OnDestroy {
  paramsSubscription : Subscription;

  constructor(private activatedRoute : ActivatedRoute) { }

  /* Angular lifecycle hooks
  */
  ngOnInit() {
    console.log("Component initialized");
    this.paramsSubscription = this.activatedRoute.params.subscribe( params => {

    });
  }

  ngOnDestroy() {
    console.log("Component will be destroyed");
    this.paramsSubscription.unsubscribe();
  }

}
于 2018-01-14T17:14:42.013 回答
7

当路由器导航到不同的路由时，组件将被销毁，并且 routerState 将变为未引用，这将使它们可以自由地收集垃圾，包括 observable。

如果您将此组件的引用传递给其他组件或服务，该组件将不会被垃圾收集并且订阅将保持活动状态，但我确信（无需验证）在导航时路由器将完成可观察对象离开并导致订阅取消。

于 2016-12-27T10:35:08.923 回答
1

每当您向组件添加订阅时，您几乎总是需要在组件被销毁时取消订阅。但是订阅 Activated 路由参数不需要取消订阅，因为路由器会在不再需要时销毁订阅。

于 2018-11-25T06:40:48.953 回答
1

Http observables 调用和路由器 observables 不需要手动取消订阅。如果你处理其他类型的 observbable 或你自己的 observable，你应该在 ngOnDestroy() 上做。您可以在 Suscription 对象中调用 unsubscribe() 方法，在该对象中将 observable 存储在组件中。

于 2020-05-18T19:17:35.640 回答