Angular何时需要Unsubscribe

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular何时需要Unsubscribe脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

需要unsubscribe的情况

Forms —

export class testcomponent {

  ngOnInIT() {
    this.form = new FormGroup({...});
    this.valueChanges  = this.form.valueChanges.subscribe(console.LOG);
    this.statusChanges = this.form.statusChanges.subscribe(console.log);
  }

  ngOnDestroy() {
    this.valueChanges.unsubscribe();
    this.statusChanges.unsubscribe();
  }

}

form control中同理

The Router —

export class TestComponent {
  constructor(PRivate route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.route.params.subscribe(console.log);
    this.route.queryParams.subscribe(console.log);
    this.route.fragment.subscribe(console.log);
    this.route.data.subscribe(console.log);
    this.route.url.subscribe(console.log);
    
    this.router.events.subscribe(console.log);
  }

  ngOnDestroy() {
    // You should unsubscribe From each observable here
  }

}

根据官方文档,Angular应该自动unsubscribe,但这里面有个bug

Renderer Service —

export class TestComponent {
constructor(private renderer: Renderer2, 
            private element : ElementRef) { }

  ngOnInit() {
    this.click = this.renderer.listen(this.element.nativeElement, "click", handler);
  }

  ngOnDestroy() {
    this.click.unsubscribe();
  }

}

Infinite Observables

export class TestComponent {

  constructor(private element : ElementRef) { }

  interval: Subscription;
  click: Subscription;

  ngOnInit() {
    this.interval = Observable.interval(1000).subscribe(console.log);
    this.click = Observable.fromEvent(this.element.nativeElement, 'click').subscribe(console.log);
  }

  ngOnDestroy() {
    this.interval.unsubscribe();
    this.click.unsubscribe();
  }

}

redux Store

export class TestComponent {

  constructor(private store: Store) { }

  toDOS: Subscription;

  ngOnInit() {
     this.todos = this.store.select('todos').subscribe(console.log);  
  }

  ngOnDestroy() {
    this.todos.unsubscribe();
  }

}

不需要 Unsubscribe 的情况

Async piPE

@Component({
  selector: 'test',
  template: `<todos [todos]="todos$ | async"></todos>`
})
export class TestComponent {

  constructor(private store: Store) { }

  ngOnInit() {
     this.todos$ = this.store.select('todos');
  }

}

当组件被销毁时,async管道自动取消订阅,以避免潜在的内存泄漏

@HostListener —

export class TestDirective {

  @HostListener('click')
  onClick() {
    ....
  }
}

Finite Observable —

当你有一个有限的序列,通常你不需要unsubscribe,例如当使用HTTPservice或timer observable。

export class TestComponent {

  constructor(private http: Http) { }

  ngOnInit() {
    Observable.timer(1000).subscribe(console.log);
    this.http.get('http://api.COM').subscribe(console.log);
  }
}

小建议

不要过多的调用unsubscribe方法,RxJS: Don’t Unsubscribe

takeUntil
它发出 Observable 的值,然后直到第二个 Observable (即 notifier )发出项,它便完成。

export class TestComponent {

  constructor(private store: Store) { }

  private componetDestroyed: Subject = new Subject();
  todos: Subscription;
  posts: Subscription;

  ngOnInit() {
     this.todos = this.store.select('todos').takeUntil(this.componetDestroyed).subscribe(console.log); 

     this.todos = this.store.select('posts').takeUntil(this.componetDestroyed).subscribe(console.log); 
  }

  ngOnDestroy() {
    this.componetDestroyed.next(); // componetDestroyed 发出值后,todos,todos会completed
    this.componetDestroyed.unsubscribe();
  }

}

参考链接

When to Unsubscribe in Angular

脚本宝典总结

以上是脚本宝典为你收集整理的Angular何时需要Unsubscribe全部内容,希望文章能够帮你解决Angular何时需要Unsubscribe所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。