Búsqueda de sitios web

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

Artículos relacionados