来自子组件的@Output 不会触发 Angular 5 中的 EventEmitter答案

【问题标题】：@Output from Child component doesn't trigger EventEmitter in Angular 5来自子组件的@Output 不会触发 Angular 5 中的 EventEmitter
【发布时间】：2018-12-25 16:16:51
【问题描述】：

我正在尝试使用带有事件发射器的@Output 在子组件与父组件之间进行通信以传递变量。我按照本教程进行操作：https://dzone.com/articles/understanding-output-and-eventemitter-in-angular

我查看了与此相关的不同 stackoverflow 问题，但没有一个适合我的情况。

子 HTML

<button (click)="onLinkedClicked();">Click me</button>

儿童 TS

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
.
.
.
export class showcaseMenuComponent implements OnInit {
    @Output() public linkedClicked = new EventEmitter<String>();

    constructor() {}

    onLinkedClicked() {
        console.log('on click child');
        this.linkedClicked.emit('collapsed');
    }
}

它会在“点击孩子”时打印日志

父 HTML

 <showcase-menu #topNavMenu [showBranding]="false"
     [showSearch]= "false" (onLinkedClicked)="linkToggler($event)"></showcase-menu>

父 TS

.
.
.
 navMenuState: string;
.
.
.
  linkToggler($event) {
    console.log("partent");
    this.navMenuState = $event;
  }

linkToggler() 永远不会被调用。而且我在控制台没有任何错误，

【问题讨论】：

标签： angular eventemitter

【解决方案1】：

事件必须与与输出装饰器关联的属性的名称匹配

<showcase-menu #topNavMenu 
               [showBranding]="false"
               [showSearch]= "false"  
               (linkedClicked)="linkToggler($event)">. 
</showcase-menu>

【讨论】：