angular - 如何让子组件和父组件之间的 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

在您的 child 中:

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

在父级中:

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

注意大写的 P。

Angular 2 区分大小写。

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