[英]Angular2, child output not bubbling up to parent
I have two components, one a child of the other. 我有两个组成部分,一个是另一个的孩子。 I have a click function that causes an event emitter on that component to emit a string.
我有一个click函数,该函数使该组件上的事件发射器发射一个字符串。 In the parent template, on the child tag, I have the event emitter triggering a function on the parent component that simply console logs a simple message.
在父模板的子标记上,我让事件发射器触发了父组件上的一个函数,该函数只需控制台即可记录一条简单的消息。 I can see by logging the event emitter variable to the console that the click function in the child is working, but I can't understand why its not outputting correctly up to the parent.
通过将事件发射器变量记录到控制台中,我可以看到子级中的click函数正在运行,但是我不明白为什么它不能正确输出到父级。
Child Component 子组件
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 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>
Parent Component 父组件
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 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');
}
OR 要么
sendTeamDataUp:EventEmitter<string>=new EventEmitter<string>(); //<<<### declare here
invokeTeamDataEmitter() {
console.log('Made it this far');
this.sendTeamDataUp.emit('WAKA WAKA WAKA');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.