如何添加一個事件到Angular中的body標籤？

我想找出一個更好的方法來實現這個功能。如何添加一個事件到Angular中的body標籤？

我試圖添加一個甚至到身體標記。我正在使用Angular 4. 由於身體標記（在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>

我試着在應用程序的類裏面添加事件監聽到身體（窗口/文件） .component.ts，如下所示：

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

這並不適用於我。在我檢查了元素後，我可以看到事件沒有被附加。

來源

2017-09-01 jnkrois

你真的想要哪個事件？滾動？ –

是的，請告訴我們您要實施的活動 – SDH

是的。我想滾動回頂部。那部分我已經有工作了。只需要聽取pageYOffset屬性以找出頁面何時到達頂端。 – jnkrois

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

來源

2017-09-01 17:52:59 Vega

非常感謝@Vega。我沒有作爲一個指令工作，但是當我把它放入我的組件時它就起作用了。無論哪種方式，您的答案都使我處於正確的方向。謝謝 – jnkrois

如何添加一個事件到Angular中的body標籤？

回答

相關問題