Angular何时需要Unsubscribe
发布时间:2020-12-17 08:26:01 所属栏目:安全 来源:网络整理
导读:需要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.lo
需要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 Observablesexport 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'); } } 当组件被销毁时, @HostListener —export class TestDirective { @HostListener('click') onClick() { .... } } Finite Observable —当你有一个有限的序列,通常你不需要 export class TestComponent { constructor(private http: Http) { } ngOnInit() { Observable.timer(1000).subscribe(console.log); this.http.get('http://api.com').subscribe(console.log); } } 小建议不要过多的调用 takeUntil 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |