Блог

У меня есть два компонента, один дочерний по отношению к другому. У меня есть функция click, которая заставляет отправитель события в этом компоненте выдавать строку. В родительском шаблоне в дочернем теге у меня есть источник событий, запускающий функцию в родительском компоненте, которая просто регистрирует простое сообщение на консоли. Я могу видеть, регистрируя переменную источника события в консоли, что функция click в дочернем элементе работает, но я не могу понять, почему она не выводится корректно до родительского элемента.

Дочерний компонент

 import {Component, OnInit, EventEmitter} from 'angular2/core';

@Component({
    selector: 'team-bubbles',
    templateUrl: '/static/partials/team/team-bubbles.html',
    outputs: ['sendTeamDataUp'],
})

export class TeamBubblesComponent {
    sendTeamDataUp:EventEmitter<string>;

    constructor() {
        this.sendTeamDataUp = new EventEmitter();
    };

    invokeTeamDataEmitter() {
        console.log('Made it this far');
        this.sendTeamDataUp.emit('WAKA WAKA WAKA');
    }

    OnInit() {
        console.log('TEAM BUBBLE WORKS');
    }
}
  

team-bubbles.html

 <div class="bubble-wrapper sm" id="bubble-1" (click)="invokeTeamDataEmitter()">
        <div class="team-bubble sm">
            <img src="/static/images/team/guy1.jpg" alt="guy 1">
        </div>
    </div>
  

Родительский компонент

 import {Component} from 'angular2/core';
import {TeamBubblesComponent} from "./teambubbles.component";
import {TeamInfoComponent} from "./team-info.component";

@Component({
    selector: 'team',
    templateUrl: '/static/partials/team/team.html'
})

export class TeamComponent {

    receiveData(){
        console.log('Output Works');
    }
}
  

team.html

 <div class="full-wrapper team-bubbles-container">
    <div class="container">
        <div class="row">
            <team-bubbles (sendTeamDataUp)="receiveData($event)"></team-bubbles>
        </div>
    </div>
</div>
<div class="full-wrapper member-bio-container">
    <div class="container" style="padding: 5px;">
        <div class="row">
            <team-info></team-info>
        </div>
    </div>
</div>
  

     sendTeamDataUp:EventEmitter<string>;

    constructor() {
        this.sendTeamDataUp = new EventEmitter<string>();           //<<<### added <string>
    };

    invokeTeamDataEmitter() {
        console.log('Made it this far');
        this.sendTeamDataUp.emit('WAKA WAKA WAKA');
    }
  

или

     sendTeamDataUp:EventEmitter<string>=new EventEmitter<string>(); //<<<### declare here

    invokeTeamDataEmitter() {
        console.log('Made it this far');
        this.sendTeamDataUp.emit('WAKA WAKA WAKA');
    }