如何让孩子和父组件之间的Angular 2通信工作？

Question

父模板

<problem-form *ngIf=showProblemView (addProblem)=problemAdd($event)></problem-form>

子组件

import { Component, Output, EventEmitter } from '@angular/core';
@Output() addproblem = new EventEmitter<string>();
onClick() {
    this.addproblem.emit('something')
    console.log('onSubmit')
    this.active = false;
}

父事件处理程序

problemAdd($event) {
    debugger;
    console.log('eventString ')
}

我知道子事件是从跟随调试器发出的。我的理解是父母没有捕获发出的子事件。有任何想法吗？谢谢！

Answer 1

在你的孩子身上：

@Output() addproblem = new EventEmitter<string>();

在父母：

<problem-form *ngIf=showProblemView (addProblem)=problemAdd($event)></problem-form>
                                        ^

注意大写P.

Angular 2区分大小写。

将属性重命名为addProblem或将输出处理程序重命名为(addproblem)。