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

【问题标题】：How to get Angular 2 communication between child and parent component to work?如何让子组件和父组件之间的 Angular 2 通信正常工作？
【发布时间】：2016-12-03 11:34:33
【问题描述】：

父模板

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

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

【问题讨论】：

标签： angular eventemitter

【解决方案1】：

在您的孩子身上：

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

在父级中：

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

注意大写的P。

Angular 2 区分大小写。

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

【讨论】：

谢谢@acdcjunior 我必须将我的 VSCode 查找设置更改为区分大小写。 StackOverflow 要我等待 7 分钟才能接受答案。谢谢！
感谢@tibbus 昨天的回复。我把这个问题记下来了，因为我手动将代码输入到 stackoverflow。在这里我做了复制/粘贴。但在这两种情况下，错误都是由于变量命名错误造成的。