web-dev-qa-db-fra.com

jette ERREUR TypeError: Impossible de lire la propriété «émettre» de non défini

Dans MyComponent, j'essaie d'émettre un autre événement à partir d'un gestionnaire d'événements. (Ce nouvel événement sera utilisé par le composant parent pour effectuer quelques actions). J'ai créé un émetteur d'événements en tant que membre de MyComponent, mais la méthode du gestionnaire d'événements n'est pas en mesure d'accéder à l'émetteur d'événements. Il jette ERROR TypeError: Cannot read property 'emit' of undefined. J'ai trouvé quelques questions connexes sur StackOverflow, mais je ne comprenais pas grand-chose en raison de la nouveauté de Angular2.

import { Component, Input, Output, OnChanges, SimpleChanges, OnInit, EventEmitter } from '@angular/core';

import YouTubePlayer from 'youtube-player';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})

export class MyComponent implements OnChanges, OnInit {
  @Input()
  videoURL = '';

  player : any;

  videoId : any;

  @Output()
  myEmitter: EventEmitter<number> = new EventEmitter();

  ngOnInit(): void {
    this.player = YouTubePlayer('video-player', {
        videoId: this.videoId,
        width: "100%"
    });
    this.registerEvents();
  }

  private registerEvents() {
    this.player.on("stateChange", this.onStateChangeEvent);
  }

  private onStateChangeEvent(event: any) {
    console.log("reached here: " + event);
    this.myEmitter.emit(1); //throws `ERROR TypeError: Cannot read property 'emit' of undefined`
  }    
}

Est-ce que quelqu'un peut m'aider? Veuillez noter que je dois émettre des événements uniquement à partir de onStateChangeEvent, car plus tard, j'aurai différents types d'émetteurs d'événements pour différents types d'événements. Je mettrai donc un commutateur dans onStateChangeEvent et j'utiliserai différents émetteurs - un pour chaque type.

angulartypescriptevent-handlingyoutube-apiemit
8
Sonu Mishra

Impossible de lire la propriété "émettre" non définie

Généralement causé par une mauvaise this. Ajoutez la syntaxe de la flèche lambda =>

Réparer

  private onStateChangeEvent = (event: any) => {
    console.log("reached here: " + event);
    this.myEmitter.emit(1); // now correct this
  }

Plus

https://basarat.gitbooks.io/TypeScript/docs/arrow-functions.html

22
basarat

Pour toute personne qui est venue ici pour trouver cela, si la solution Basarats ne fonctionnait pas, vérifiez que la ligne au-dessus de l'émetteur d'événement n'a pas de fautes de frappe. J'avais un ViewChild sans nom au-dessus de mon EventEmitter non défini.

0
Nick Gallimore