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

Question

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

javascriptangulartypescriptdom-eventsangular2-template

3

我希望找到更好的方法来实现这个功能。

我正在尝试向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文件头部的script标签之间，如下所示：

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

我尝试在app.component.ts类中向body（window/document）添加事件监听器，如下所示：

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

这对我没有用。在我检查了该元素之后，我发现事件没有被附加。

- jnkrois

2

你需要哪个事件？滚动事件吗？ - Vikhyath Maiya

1

是的，请告诉我们您正在尝试实现哪个事件。 - SDH

是的，我想要滚动回顶部。那部分我已经实现了。只需要监听页面的pageYOffset属性，以确定页面何时达到顶部。 - jnkrois

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vega · Accepted Answer

您可以使用 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 事件一起使用。