首页 文章

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

提问于
浏览 次
0

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

子组件

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>
templates angular output components

1 回答

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

    OR

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

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

相关问题