如何在 Angular 中向 body 标签添加事件？答案

【问题标题】：How to add an event to the body tag in Angular?如何在 Angular 中向 body 标签添加事件？
【发布时间】：2018-02-10 19:55:24
【问题描述】：

我想找到一种更好的方法来实现这个功能。

我正在尝试向 body 标签添加一个偶数。我正在使用 Angular 4。由于 body 标记（在 index.html 中）不是通过组件处理的，因此我无法使用 angular 方式来完成此操作。

我通常会为 xyz.component.html 做这样的事情：

(click)="myMethod()"

在 xyz.component.ts 中有类似的东西

public myMethod(): void {
    // do something here
}

由于我对 Angular 的了解有限，除了直接将事件添加到 body 标签之外，我想不出更好的方法，如下所示：

<body onscroll="myMethod()">

并将实际函数放置在 index.html 文件本身的头部的脚本标记之间，如下所示：

<head>
    <script>
        function myMethod(){
            // do something here
        }
    </script>
</head>

我尝试在 app.component.ts 中的类内向正文（窗口/文档）添加一个事件监听器，如下所示：

export class AppComponent implements OnInit{
    public myMethod(): void{
        window.addEventListener('myEvent', this.myEventHandler, false);
    }
}

这对我不起作用。检查元素后，我可以看到事件没有附加。

【问题讨论】：

你到底想要哪个事件？滚动？
是的，请告诉我们您要实施的事件
是的。我想滚动回到顶部。那部分我已经开始工作了。只需要监听 pageYOffset 属性就可以知道页面何时到达顶部。

标签： javascript angular typescript dom-events angular2-template

【解决方案1】：

您可以使用Hostlistener 从您的组件或指令中访问文档/窗口滚动事件。

例如，波纹管将跟踪身体滚动。它在指令中使用，但您也可以将其放在组件中。

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

@Directive({ selector: '[trackScroll]' })
export class TrackScrollDirective {
    constructor(private el: ElementRef) {
}

    @HostListener('document:scroll', [])
    onScroll(): void { //will be fired on scroll event on the document
         document.querySelector('body').classList.add('newClass'); // access to the body tag
    }
}

这可以与window:scroll 事件一起使用。

【讨论】：

非常感谢@Vega。我没有作为指令工作，但是当我把它放在我的组件中时它就起作用了。不管怎样，你的回答让我朝着正确的方向前进。谢谢