Angular2: Должны ли слушатели хоста быть неподписанными? Как работает Host Listner? Если мне не нужно отписываться, когда он отписывается? - PullRequest
Новая
       22

Angular2: Должны ли слушатели хоста быть неподписанными? Как работает Host Listner? Если мне не нужно отписываться, когда он отписывается?

0 голосов
/ 25 апреля 2018 
 @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    // Do something
  }

Я слушал события прокрутки во многих компонентах. И я не отписываюсь. Вызывает ли это проблему.

1 Ответ

0 голосов
/ 25 апреля 2018

Должны ли подписчики хоста быть отписаны?

Нет, отписываться не нужно - слушатели хоста уничтожаются при уничтожении компонента, к которому они принадлежат

Как работает Host Listner [sic]?

Чтобы лучше понять, как работает 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);
  }

}

Приложение по умолчанию будет перенаправлять на хост: порт / test1, отображая TestComponent1. Когда происходит событие прокрутки, оно регистрирует в консоли «событие прокрутки в Test1Component» и информацию о событии. Если вы измените URL на host: port / test2, он уничтожит компонент test1 (вместе с его @HostListeners) и отобразит компонент test2. Теперь, когда происходит событие прокрутки, оно регистрирует в консоли «событие прокрутки в Test2Component» и информацию о событии. Обратите внимание, что он не регистрирует событие прокрутки в Test1Component, потому что этот @HostListener был уничтожен, когда был уничтожен его родительский компонент (Test1Component).

...