我想找到更好的方法来实现此功能。
我正在尝试向正文标记添加偶数。我正在使用 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);
}
}
这对我不起作用。检查该元素后，我可以看到该事件未附加。
最佳答案
您可以使用 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 事件一起使用。
关于javascript - 如何在 Angular 中向 body 标签添加事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46005513/