Question

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

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

我通常会为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);
    }
}

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

Answer 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事件。

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

1 个答案: