时间戳

首页 > 解决方案 > Angular2：主机侦听器是否应该取消订阅？主机监听器如何工作？如果我不必退订，什么时候退订？

angular - Angular2：主机侦听器是否应该取消订阅？主机监听器如何工作？如果我不必退订，什么时候退订？

问题描述

 @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    // Do something
  }

我一直在听许多组件中的滚动事件。而且我没有退订。会不会造成问题。

标签： angulareventsunsubscribe

解决方案

是否应该取消订阅主机侦听器？

不，不需要取消订阅 - 主机侦听器在它们所属的组件被销毁时被销毁

Host Listner [原文如此] 是如何工作的？

为了更好地理解 HostListener 的工作原理，我建议阅读这些有用的文档

什么时候退订？

当父组件/指令被销毁时

为了说明我的观点，请看这个示例应用程序：

app.module.ts

import { RouterModule, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Test1Component } from './test1/test1.component';
import { Test2Component } from './test2/test2.component';

const routes: Routes = [
  { path: 'test1', component: Test1Component },
  { path: 'test2', component: Test2Component },
  { path: '**', redirectTo: 'test1' }
];


@NgModule({
  declarations: [
    AppComponent,
    Test1Component,
    Test2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h1>host listener example</h1>
<a routerLink="test1">test1</a>
<a routerLink="test2">test2</a>
<router-outlet></router-outlet>
<div>
  <p>some content</p>
  <div style="height:1000px"></div>
  <p>some content down the page</p>
</div>

test1.component.ts

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
  constructor() { }

  ngOnInit() { }


  @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    console.log('scroll event in Test1Component', event);
  }
}

test2.component.ts

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    console.log('scroll event in Test2Component', event);
  }

}

该应用程序将默认重定向到 host:port/test1，呈现 TestComponent1。当滚动事件发生时，它将记录到控制台“Test1Component 中的滚动事件”和有关事件的信息。如果将 url 更改为 host:port/test2，它将破坏 test1component（连同它的@HostListeners）并渲染 test2component。现在，当滚动事件发生时，它将记录到控制台“Test2Component 中的滚动事件”和有关事件的信息。请注意它是如何不记录“Test1Component 中的滚动事件”的，因为 @HostListener 在其父组件 (Test1Component) 被销毁时被销毁。

推荐阅读