web-dev-qa-db-ja.com

Angular2のEventEmitterからイベントをキャッチできませんか？

EventEmitterクラスを利用する基本的なangularアプリケーションを作成しましたが、リスニングコンポーネントにイベントをキャッチさせることができません。

これが私のコードです（Angular2/TypeScript 1.5でalpha.27を使用してES5にコンパイルしています）冗長な例についてお詫びします。

私が間違っていることについてのアドバイスは大歓迎です。

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

}
typescripteventemitterangulartypescript1.5
8
DaylightProgrammer

これが 動作中のプランカー アプリです。

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);

いくつか問題があったと思います。テンプレートの(update)はイベントの一種であるため、loggedInと呼ぶことはできません。イベントをupdateと呼ぶだけの方が簡単だと思いました。

9
shmck

自分でこの問題に苦労しました。

それが機能しない理由は、イベント名の場合によるものです。これがloggedInではなくloggedinという名前の場合は、問題ありませんでした。

4
Simon

Rootクラスのテンプレートで、loggedIn呼び出しに$ eventを渡す必要があります。

(loggedIn) = "loggedIn($event)"

$ event変数は、LoginクラスのloggedInエミッターの次のメソッドで渡すオブジェクトを表します。もちろん、RootクラスのloggedInメソッドも、引数としてオブジェクトを受け入れる必要があります。

3
Krustie101

私の場合、クラスメンバーを@Output()で装飾するのを忘れました。

@Output() close: EventEmitter<DialogResult> = new EventEmitter<DialogResult>();
1
Thorsten Westheider

これを見たことがありますか 例 ？ Viktor Savkinはあなたとほとんどすべてを同じように使用しますが、この行に空のオブジェクトはありません。

this.complete.next();

AngularUで、MiskoはEventEmitterの例を示しています： https://angularu.com/VideoSession/2015sf/angular-2-roadmap-update 41：00から

0
kakaja