Angular2输出/ emit（）不起作用

Question

对于我的生活，我无法弄清楚为什么我不能发射或捕获一些数据。 触发toggleNavigation() ，但我不确定.emit()是否真的有效。

最终我想折叠并展开导航，但是现在我只想了解如何将navigation.component中的数据发送到app.component 。

这是一个Plunker链接

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

PAS-navigation.component

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

编辑

我添加了Pankaj Parkar的建议。

Answer 1

您只需要在方法上指定$event参数，因此无论在navToggle输出值上发出什么，该数据都将在AppComponent 's toggleNavigation method $ event`参数中可用。

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

AppComponent

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

分叉的Plunkr