如何使 Angular 2 child 和 parent 组件之间的通信正常工作？

Question

Parent 模板

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

Child 组件

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

Parent 事件处理程序

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

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

Answer 1

在你的child中：

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

在parent中：

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

注意大写P。

Angular 2 是 case-sensitive.

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

如何使 Angular 2 child 和 parent 组件之间的通信正常工作？

How to get Angular 2 communication between child and parent component to work?

angular

eventemitter