angular - 无法捕获自定义事件

Question

我设法发出自定义事件，但似乎无法在另一个组件中捕获该事件。

这是发射器:

import { Component, Output, EventEmitter } from 'angular2/core';

@Component({
    selector: 'x-hamburger-button',
    template: `
        <div (click)="toggleSidebar()">
           <i class="fa fa-bars">
              <a href="#"></a>
           </i>
        </div>
        `
})

export class HamburgerButton {
    @Output() toggled = new EventEmitter();
    toggleSidebar = function () {
        this.toggled.emit();
        console.log('toggled.emit()');
    };
}

这是接收组件:

import { Component } from 'angular2/core';
import { HamburgerButton } from './hamburger-button.component';

@Component({
    selector: "x-sidebar",
    template: `
        <div (toggled)="onToggled()" [ngClass]="{collapsed: collapsed}">
        </div>
        `
})

export class Sidebar {
    collapsed: boolean = false;
    onToggled = function () {
        this.collapsed = !this.collapsed;
        console.log('event caught');
    };
}

我在控制台上收到 toggled.emit()，但没有捕获事件。知道我错过了什么吗？

Answer 1

请仔细查看更改。
注意:此代码引用 TypeScript

export class HamburgerButton {
    @Output() toggled = new EventEmitter();
    toggleSidebar() {                  //changed
        this.toggled.emit('Angular2'); //value emitted

    };
}

---

@Component({
        selector: "x-sidebar",
        template: `
            <x-hamburger-button (toggled)="onToggled($event)" [ngClass]="{collapsed: collapsed}">               //changed
            </x-hamburger-button>      //changed
            `
    })


export class Sidebar {
    collapsed: boolean = false;
    onToggled(value) {                //changed
        this.collapsed = !this.collapsed;
        console.log(value);           //Angular2 <--------
    };
}