Question

我有两个组件，一个是另一个组件的子组件。我有一个单击功能，导致该组件上的事件发射器发出一个字符串。在父模板中，在子标记上，我让事件发射器在父组件上触发一个函数，只是控制台记录一条简单的消息。我可以通过将事件发射器变量记录到控制台来看到孩子中的单击功能正在工作，但我无法理解为什么它没有正确输出到父母。

子组件

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

团队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>

Answer 1

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

Angular2，孩子输出没有冒泡到父母

1 个答案: