Question

我正在尝试将孩子的输出传递给其父级，不确定为什么它不起作用，

子：

装饰者：

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

@Output() notify: EventEmitter<string> = new EventEmitter<string>();
onClick(){
  this.notify.emit('msg from child component');
}

进口：

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

模板：

<button (click)="onClick()"> search </button>

父：

onNotifyClicked(message: string): void {
  this.showMsg = message;
}

模板：

<child (notify)="onNotifyClicked($event)"> </child>

我到达发出通知的状态（this.notify.emit（'来自搜索组件的消息'）; 运行，没有抛出错误的发射）但是我从来没有进入过NotifyClicked（）的父处理程序，

Answer 1

将变量更改为，

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

Answer 2

您的代码应该有效，除非您的父级不是直接在子组件中监听（如在您的帖子中），而是在其父级之一上。 Angular不支持事件冒泡，因此如果您的父组件有类似下面的代码示例，它将不会收到消息：

<div (notify)="onNotifyClicked($event)">
   <child></child>
</div>

Answer 3

我的步骤是正确的，我不得不重启我的开发环境，无论谁到这里 - 都不要浪费你的时间阅读这个用例。

Angular 4父组件事件侦听器不会由子发出的事件触发

3 个答案: