Angular 5 EventEmitter无输出问题求助：为何示例无法运行？

我仔细看了你的app.menu.ts组件代码，发现几个关键问题，这些问题可能导致EventEmitter无法正常工作，甚至组件本身都没有正确初始化：

1. 模板路径未加引号 #

你的templateUrl字段值没有用引号包裹：

templateUrl: app.menu.html,

Angular会把app.menu.html当作一个变量而非字符串路径，这会导致组件无法找到模板文件，进而组件无法正常初始化，EventEmitter自然也无法工作。

修复方法：给路径加上引号，根据你的文件结构调整相对路径（通常用./开头）：

templateUrl: './app.menu.html',

2. 数组语法错误 #

items数组中的对象没有正确闭合，缺少了结尾的}：

items: object[] = [
  {action: 'login', text: 'zaloguj s...'
];

这种语法错误会导致组件编译失败，虽然你说没有报错，但很多情况下运行时环境可能会静默处理这个错误，导致组件无法正常加载。

修复方法：补全对象的闭合括号：

items: object[] = [
  {action: 'login', text: 'zaloguj s...'}
];

3. 缺少触发EventEmitter的代码 #

你只声明了@Output() pick = new EventEmitter<any>();，但没有任何地方调用this.pick.emit()来触发事件。EventEmitter本身只是一个事件容器，必须主动调用emit()方法才能把事件传递给父组件。

比如，假设你在模板里有点击菜单项的逻辑，你需要在组件类里添加对应的触发代码：

onItemClick(item: any) {
  this.pick.emit(item); // 触发事件，把选中的菜单项传给父组件
}

然后在app.menu.html模板里绑定点击事件：

<div *ngFor="let item of items" (click)="onItemClick(item)">
  {{ item.text }}
</div>

4. 组件选择器的命名规范（可选，但建议遵循） #

你的组件选择器是selector: 'Menu'，Angular官方推荐使用小写短横线分隔的命名方式（比如app-menu），虽然这不会直接导致EventEmitter失效，但遵循规范可以避免潜在的模板解析问题。

修复后完整的组件代码示例：

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-menu', // 调整为规范的选择器
  templateUrl: './app.menu.html',
  styleUrls: ['./app.menu.css'], // 这里也建议加上./，保持路径一致
})
export class Menu {
  @Output() pick = new EventEmitter<any>();
  hidden: boolean = true;
  items: object[] = [
    {action: 'login', text: 'zaloguj s...'}
  ];

  // 添加触发事件的方法
  onItemSelect(item: any) {
    this.pick.emit(item);
  }
}

按照上面的步骤修复后，记得在父组件的模板里正确绑定pick事件：

<app-menu (pick)="handleMenuPick($event)"></app-menu>

然后在父组件类里实现handleMenuPick方法来接收事件：

handleMenuPick(selectedItem: any) {
  console.log('选中的菜单项：', selectedItem);
}

内容的提问来源于stack exchange，提问作者Eva