javascript - Angular2 Output/emit() no funciona
Por más que lo intento, no puedo entender por qué no puedo emitir ni capturar algunos datos. El toggleNavigation() se dispara, pero no estoy seguro de si el .emit() realmente está funcionando.
Eventualmente quiero colapsar y expandir la navegación, pero por ahora solo quiero entender cómo enviar datos desde el navigation.component al app.component.
Aquí hay un enlace de 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-navegación.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');
}
}
EDITAR
Agregué las sugerencias de Pankaj Parkar.
Respuesta #1
Solo necesitas especificar el parámetro $event en el método, de modo que cualquier cosa emitida en el valor de salida navToggle, esos datos estarán disponibles dentro del parámetro 'stoggleNavigationmethod$event` de AppComponent.
<pas-navigation
(toggle)="toggleNavigation($event);">
</pas-navigation>
ComponenteApp
toggleNavigation(data) {
// you can get emitted data here by `pas-navigation` component
console.log('event', data);
}
Plunkr bifurcado
