如何在Angular2中销毁HostListener

时间:2017-09-13 13:47:52

标签: javascript html angular typescript angular2-template

我正在创建一个页面,在该页面中向下滚动页面时会发生动画,当元素在视口上可见时,将出现相应的动画。当我使用Angular2时,考虑使用它来编写滚动功能。我搜索了一整天,发现HostListener将满足我的要求。但是,我的问题是“已经使用了多个页面”。因此,我需要滚动功能只发生一个所需的页面。有没有解决方案。

我还想到了列出的一些可能的解决方案:

  1. 我们可以销毁听众
  2. 为特定页面添加监听器
  3. 如果上述情况可能,那我们该怎么做呢。

    我的代码:

    import {Component,HostListener} from '@angular/core';
    @Component({
        selector: 'my-app',
        templateUrl:'src/html/home.html',
    })
    
    export class Home {
        @HostListener('window:scroll', ['$event'])
    onScroll(e){
    // My animation code
    }
    }
    

    HTML代码:

    <div (window:resize)="onResize($event)">
    //some code
    </div>
    

1 个答案:

答案 0 :(得分:1)

我不确定我是否完全理解您的问题。是否要在到达某个滚动点时停止监听滚动事件?在那种情况下,只需在ngOnInit中创建您自己的侦听器,然后在您不再对这些事件感兴趣时在window上调用removeEventListener。

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

@Component({
    selector: 'my-app',
    templateUrl:'src/html/home.html',
})
export class Home {

    private boundScrollCallback: Function;

    ngOnInit() {
        /**
         * Need to bind the onScroll function so that "this" in
         * onScoll will result in the component instance itself.
         * Otherwise this.removeScrollLiteners() will not work in that context.
         */
        this.boundScrollCallback = this.onScroll.bind(this);

        window.addEventListener('scroll', this.boundScrollCallback);
        /**
         * Need this as well as resizing the window may result
         * in a change of scroll position.
         */
        window.addEventListener('resize', this.boundScrollCallback);
    }

    onScroll(e){
        if (true /** Logic to check scroll position goes here */) {
            // Animation code

            this.removeScrollLiteners(); // Stop listening for events.
        }
    }

    /**
     * Remove the event listeners.
     */
    private removeScrollLiteners() {
        window.removeEventListener('scroll', this.boundScrollCallback);
        window.removeEventListener('resize', this.boundScrollCallback);
    }

    ngOnDestroy() {
        this.removeScrollLiteners(); // Stop listening for events.
    }
}

否则,我会考虑IntersectionObserver来解决此问题,因为它使这类事情更易于处理。