Angular何时需要Unsubscribe

大佬教程收集整理的这篇文章主要介绍了Angular何时需要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();
  }

}@H_197_5@ 
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
  }

}@H_197_5@ 
根据官方文档，Angular应该@L_618_0@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();
  }

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

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

}@H_197_5@ 
@H_944_0@不需要 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');
  }

}@H_197_5@ 
当组件被销毁时，async管道@L_618_0@取消订阅，以避免潜在的内存泄漏。
 
@HostListener —
 
export class TestDirective {

  @HostListener('click')
  onClick() {
    ....
  }
}@H_197_5@ 
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);
  }
}@H_197_5@ 
@H_944_0@小建议 
不要过多的调用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();
  }

}@H_197_5@ 
@H_944_0@参考链接 
When to Unsubscribe in Angular
大佬总结
       
以上是大佬教程为你收集整理的Angular何时需要Unsubscribe全部内容，希望文章能够帮你解决Angular何时需要Unsubscribe所遇到的程序开发问题。
		
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。