Angular2 EventEmitter不工作且没有错误

时间:2016-09-25 20:51:07

标签: angular typescript

我正在尝试发出一个简单的事件,我无法让它发挥作用。

import {Component, Input, Output, EventEmitter} from '@angular/core'
import {MenuService} from "./menu.service";


    @Component({
        selector:'side-menu',
        templateUrl:'component.html',
    })

    export class SideMenuComponent {

        @Output() pinnedChange:EventEmitter<any> = new EventEmitter();

        //Show and Hide the Detail Pane
        detailPanePinned = false;
        detailPaneVisible = false;

        pinMenuClick(){
            this.detailPanePinned = !this.detailPanePinned;
            this.detailPaneVisible = !this.detailPaneVisible;

            this.pinnedChange.emit({
                detailPanePinned: this.detailPanePinned
            })

        }

    }

以下是我试图听取的HTML

<side-menu class="side-block pull-left">

</side-menu>
<design-pane (change)="onPinnedChange($event)"></design-pane>
<side-menu class="side-block pull-right">
</side-menu>

这是上面html的组件

import {Component} from '@angular/core'

@Component({
    selector:'builder-layout',
    templateUrl:'app/builder/layout/layout.component.html'
})

export class BuilderLayoutComponent {

    onPinnedChange($event){
        console.log($event)
    }
}

当我点击pinMenuClick时,我没有收到任何错误。它只是没有击中我的onPinnedChange()

我正在使用Angular2 2.0.0官方

1 个答案:

答案 0 :(得分:3)

我相信只有发出事件的组件才能收听它,在你的情况下,是侧边菜单。所以你需要做这样的事情:

<side-menu (pinnedChange)="onPinnedChange($event)"></side-menu>