Javascript Angular2输出/发射（）不工作

就我的一生而言，我无法理解为什么我不能发射或捕获某些数据。

toggleNavigation（）

启动，但我不确定

.emit（）

是否实际工作

最终我想折叠并扩展导航，但现在我只想了解如何将数据从

navigation.component

发送到

app.component

应用程序组件

import { Component } from '@angular/core';
import { PasNavigationComponent } from './shared/index';

@Component({
    moduleId: module.id,
    selector: 'pas-app',
    template: `
          <pas-navigation 
            (toggle)="toggleNavigation($event);">
          </pas-navigation>

          <section id="pas-wrapper">
              <pas-dashboard></pas-dashboard>
          </section>              
    `,
    directives: [PasNavigationComponent]
})

export class AppComponent {
    toggleNavigation(data) {
    console.log('event', data);
    }
}

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

@Component({
    moduleId: module.id,
    selector: 'pas-navigation',
    template: `
        <nav>
            <div class="navigation-header">
                <i class="fa fa-bars" (click)="toggleNavigation()"></i>
            </div>
        </nav>
    `
    })

export class PasNavigationComponent {

    @Output('toggle') navToggle = new EventEmitter();

    toggleNavigation() {  
        this.navToggle.emit('my data to emit');
    }
}

toggleNavigation(data) {
   // you can get emitted data here by `pas-navigation` component
   console.log('event', data);
}

从'@angular/core'导入{Component}；
从“./shared/index”导入{PasNavigationComponent}；
@组成部分({
moduleId:module.id，
选择器：“pas应用程序”，
模板：`
`,
指令：[PasNavigationComponent]
})
导出类AppComponent{
航空（数据）{
console.log（'事件'，数据）；
}
}

pas导航组件

import { Component } from '@angular/core';
import { PasNavigationComponent } from './shared/index';

@Component({
    moduleId: module.id,
    selector: 'pas-app',
    template: `
          <pas-navigation 
            (toggle)="toggleNavigation($event);">
          </pas-navigation>

          <section id="pas-wrapper">
              <pas-dashboard></pas-dashboard>
          </section>              
    `,
    directives: [PasNavigationComponent]
})

export class AppComponent {
    toggleNavigation(data) {
    console.log('event', data);
    }
}

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

@Component({
    moduleId: module.id,
    selector: 'pas-navigation',
    template: `
        <nav>
            <div class="navigation-header">
                <i class="fa fa-bars" (click)="toggleNavigation()"></i>
            </div>
        </nav>
    `
    })

export class PasNavigationComponent {

    @Output('toggle') navToggle = new EventEmitter();

    toggleNavigation() {  
        this.navToggle.emit('my data to emit');
    }
}

toggleNavigation(data) {
   // you can get emitted data here by `pas-navigation` component
   console.log('event', data);
}

从'@angular/core'导入{Component，Output，EventEmitter}；
@组成部分({
moduleId:module.id，
选择器：“pas导航”，
模板：`
`
})
导出类PasNavigationComponent{
@输出（'toggle'）navToggle=neweventemitter（）；
toggleNavigation（）{
this.navToggle.emit（'my data to emit'）；
}
}

编辑

---

我添加了Pankaj Parkar的建议。

您只需要在方法上指定

$event

参数，这样无论在

navToggle

输出值上发出什么，这些数据都将在AppComponent

的

toggleNavigation

方法

$event`参数中可用

<pas-navigation 
    (toggle)="toggleNavigation($event);">
</pas-navigation>

---

我简直不敢相信我忘记了

$event

。我做了更正，但仍然一无所获。我确实注意到

console.log（）

没有启动。所以我认为

（toggle）=“toggleNavigation（$event）

没有启动。@迈克，你能在我的回答中找到附加的plunkr吗，谢谢：）