Question

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

我一直在听许多组件中的滚动事件。而且我不是取消订阅。是否会导致问题。

Answer 1

主持人听众是否应该取消订阅？

不，没有必要取消订阅 - 主机监听器在其所属组件被销毁时被销毁

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＆＃39;中的控制台滚动事件。和有关该事件的信息。如果将url更改为host：port / test2，它将销毁test1component（及其@HostListeners）并呈现test2component。现在，当滚动事件发生时，它将登录到Test2Component＆＃39;中的控制台＆＃39;滚动事件。和有关该事件的信息。注意它如何不在Test1Component＆＃39;中记录＆＃39;滚动事件。因为@HostListener在其父组件（Test1Component）被销毁时被销毁。

Angular2：主持人听众应该不受限制吗？ Host Listner如何运作？如果我不需要取消订阅，何时取消订阅？

1 个答案: