Bodyタグにイベントを追加するにはどうすればいいですか？

この機能を実装するためのより良い方法を知りたいと思います。Bodyタグにイベントを追加するにはどうすればいいですか？

bodyタグにも均等に追加しようとしています。私はAngular 4を使用しています。 bodyタグ（index.html内）はコンポーネントで処理されていないため、これを行うために角を使うことはできません。

私は普通xyz.component.htmlのためにこのような何かをするだろう。このような

(click)="myMethod()"

そして何かをxyz.component.ts

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

に原因の私の限られた知識にこのように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

Bodyタグにイベントを追加するにはどうすればいいですか？

答えて

関連する問題