Comment ajouter un événement à l'étiquette du corps dans Angular?

Je voudrais trouver une meilleure façon d'implémenter cette fonctionnalité. J'essaie d'ajouter une balise pair to the body. J'utilise Angular 4. Puisque l'étiquette de corps (dans index.html) n'est pas traitée par un composant, je ne peux pas utiliser la méthode angulaire pour accomplir ceci.Comment ajouter un événement à l'étiquette du corps dans Angular?

je normalement faire quelque chose comme ça pour le xyz.component.html:

(click)="myMethod()"

Et quelque chose comme ça dans les xyz.component.ts

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

En raison de ma connaissance limitée Angulaire, je ne peux pas penser à une meilleure façon de le faire, autre que d'ajouter l'événement directement à l'étiquette du corps, comme ceci:

<body onscroll="myMethod()">

Et placer la fonction réelle entre les balises de script dans la tête du fichier index.html lui-même, comme ceci:

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

J'ai essayé d'ajouter un écouteur d'événement au corps (fenêtre/document) à l'intérieur de la classe dans l'application .component.ts, comme ceci:

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

Cela n'a pas fonctionné pour moi. Après avoir inspecté l'élément, j'ai pu voir que l'événement ne s'est pas attaché.

Source

2017-09-01 jnkrois

quel événement voulez-vous exactement? –

Oui, s'il vous plaît dites-nous quel événement vous essayez de mettre en œuvre – SDH

Oui. Je veux revenir en haut. Cette partie j'ai déjà travaillé. Juste besoin d'écouter la propriété pageYOffset pour savoir quand la page atteint le sommet. – jnkrois

Vous pouvez accéder à l'événement de défilement document/fenêtre à partir de vos composants ou directives à l'aide d'un Hostlistener. Par exemple, le soufflet suivra le défilement du corps. Il est utilisé dans une directive, mais vous pouvez également le mettre dans un composant.

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 
    } 
}

Vous pouvez également écouter événement window:scroll.

Source

2017-09-01 17:52:59 Vega

Merci beaucoup @Vega. Je n'ai pas travaillé en tant que directive, mais cela fonctionne quand je le mets dans mon composant. De toute façon, votre réponse me met dans la bonne direction. Merci – jnkrois

Comment ajouter un événement à l'étiquette du corps dans Angular?

Répondre

Questions connexes