在 Angular 2+ 中使用 @Ouput 装饰器与父级通信时遇到问题答案

【问题标题】：Having trouble using @Ouput decorator to communicate with parent in Angular 2+在 Angular 2+ 中使用 @Ouput 装饰器与父级通信时遇到问题
【发布时间】：2018-08-13 15:39:15
【问题描述】：

我知道有与此主题相关的问题，我查看了文档，但我不明白如何使用输出。

我有一个带有这个@Output 的子组件

//here I define the Ouput on the child component
@Output() turvo: EventEmitter<boolean> = new EventEmitter();

//here I emit the event on the child component
ngOnInit() {
  this.turvo.emit(false);
}

父组件

//here I listen to the emitted event on the parent
<div (turvo)="atribuirTurvoDoFilho($event)"></div>

//here is the function that should be executed on the parent.
public atribuirTurvoDoFilho(data) {
  console.log("I will never execute :(");
  this.turvo = data;
}

我没有出错，但没有发生通信。

【问题讨论】：

必须在子组件标签中设置事件处理程序：<my-child-component (turvo)="..." ></my-child-component>。
How to communicate between component in Angular?的可能重复
我用的是router-outlet，有什么问题吗？
必须在发出它的组件的组件标签上设置事件处理程序。
@DiegoAlves - This post 应该回答您有关使用路由器插座处理事件的问题。

标签： angular typescript

【解决方案1】：

如果您想要一个可行的解决方案，请分享您的完整子组件。

现在，我可以看到，您尝试在 div 元素上运行输出 - 这是一个 html 标记，而不是一个角度组件。

如果你定义了一个输出，它将只对定义的那个组件起作用。

【讨论】：