Nicht in der Lage zu fangen die Ereignisse von EventEmitter in Angular2?

Ich geschrieben habe, ein basic-Winkel-Anwendung, die nutzt die EventEmitter-Klasse, aber ich kann nicht das hören Komponente zum abfangen des Ereignisses.

Hier ist mein code (mit alpha.27 auf Angular2 /Typoskript 1.5 kompilieren zu ES5)
Entschuldigt sich für das ausführliche Beispiel.

Irgendwelche Tipps, was ich falsch mache, was würde sehr geschätzt werden.

import {Component, View, EventEmitter} from 'angular2/angular2';

@Component({
    selector: 'login',
    events : ['loggedIn']
})

@View({
    template: '<button type="button" (click)="submitForm()">Click Me</button>'
})

export class Login {

    loggedIn = new EventEmitter();

    constructor() { 
    }

    submitForm() {
        console.log("event fired");
        this.loggedIn.next({});
    }

}


@Component({
    selector: 'app'
})

@View({
    template: "<div>This is the application</div>"
})

export class App {
    constructor() {

    }
}

@Component({
  selector: 'root'
})

@View({
  template: '<app [hidden]=!showApp></app><login (loggedIn)="loggedIn()" [hidden]=showApp></login>',
  directives: [ App, Login ]
})

export class Root {

    showApp:boolean;

    constructor() { 
        this.showApp = false; 
    }

    loggedIn() { 
        console.log("event caught");
        this.showApp = true; 
    }

}
  • versuchen (^loggedIn)
  • Vielen Dank für Ihre Antwort. Ich habe versucht: (^loggedIn)="loggedIn()" aber das hat nicht das Problem gelöst.
  • könnten wir entfernen diese Frage? es ist ziemlich verwirrend, weil ng2 wurde aktualisiert und jetzt weder die Frage noch die Antwort ist nicht up-to-date
InformationsquelleAutor DaylightProgrammer | 2015-06-24
  1. 9

    Hier ist eine funktionierende Plunker Ihrer app.

    import {Component, View, EventEmitter, bootstrap} from '@angular/core';

@Component({
   selector: 'login',
  events : ['update']
})
@View({
  template: '<button type="button" (click)="submitForm()">Login</button>'
})
class Login {
  constructor() { 
    this.update = new EventEmitter();
  }
  submitForm() {
    this.update.next();
  }
}


@Component({
  selector: 'app'
})
@View({
  template: "<div>This is the application</div>"
})
class App {}

@Component({
 selector: 'root'
})
@View({
  template: `
  <app [hidden]="!showApp"></app>
  <login (update)="loggedIn()" 
    [hidden]="showApp"></login>
  `,
  directives: [App, Login]
})
class Root {
    showApp:boolean;
    constructor() { 
        this.showApp = false; 
    }
    loggedIn() { 
        this.showApp = true; 
    }
}

bootstrap(Root);

    Ich denke, es waren ein paar Probleme. (update) in der Vorlage ist eine Art von Ereignis, so dass es nicht aufgerufen werden kann loggedIn. Ich fand es einfacher, nur nennen die Veranstaltung update insgesamt.

    • Danke! Schätzen die Arbeit Beispiel.
    InformationsquelleAutor shmck
  2. 4

    Nur kämpfte mit diesem Problem mich.

    Der Grund, warum es nicht funktioniert, ist aufgrund der bei den event-Namen. Wenn dieser benannt wurde loggedin eher als loggedIn es wäre okay gewesen.

    • Ich habe gerade festgestellt, dass, Wenn Sie möchten, verwenden Sie groß-und Kleinschreibung der Namen für Ihre benutzerdefinierte Ereignisse, die Sie verwenden können, 'loggedIn' für den Namen der Variablen, und "logged-in" für den event-Namen in den HTML-Code. so ... (angemeldeten)="handler()"
    InformationsquelleAutor Simon
  3. 3

    Im template der Root-Klasse, sollten Sie übergeben $event in der loggedIn nennen:

    (loggedIn) = "loggedIn($event)"

    Den Variablen "$event " stellt das Objekt, das Sie passieren in der nächsten Methode des loggedIn-emitter in der Login-Klasse. Natürlich, Ihre loggedIn Methode der Root Klasse sollte auch akzeptiert ein Objekt als argument.

    • Auch in der code hinter der Wurzel, Sie sollten erklären: loggedIn(obj) { console.log("Ereignis gefangen"); dies.showApp = true; }
    • Das hat eigentlich keine Auswirkungen. Das Problem bezieht sich auf die (event) auf der linken Seite aufgerufen (loggedIn), wenn der event-Typ ist (update).
    InformationsquelleAutor Krustie101
  4. 1

    In meinem Fall habe ich vergessen zu schmücken, die in der Klasse mit @Output() z.B.

    @Output() close: EventEmitter<DialogResult> = new EventEmitter<DialogResult>();
    InformationsquelleAutor Thorsten Westheider
  5. 0

    Haben Sie gesehen,Beispiel? Viktor Savkin verwendet fast alles das gleiche wie Sie, aber ohne ein leeres Objekt in dieser Zeile:

    this.complete.next();

    Auf dem AngularU, Misko hat gezeigt, ein Beispiel mit EventEmitter: https://angularu.com/VideoSession/2015sf/angular-2-roadmap-update
    ab 41:00

    • Wenn ich pass durch keine Argumente bekomme ich die folgende compiler-Fehlermeldung: Fehler TS2346: Gelieferten Parameter passen nicht zu jeder Signatur der call-Ziel.
    • Hat dies keine Wirkung, können Sie ein Objekt übergeben, oder rufen Sie einfach die Event-Emitter.
    InformationsquelleAutor kakaja
Schreibe einen Kommentar