Angular2 Output/emit（）不工作

Question

对于我的生活，我无法弄清楚为什么我不能发出或捕获一些数据。 toggleNavigation()火灾，但我不确定.emit()是否实际工作。

最后，我要崩溃了，并展开导航，但现在我只是想了解如何从navigation.component将数据发送到app.component。

Here is a Plunker link

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

EDIT

我加了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); 
} 

Forked Plunkr