父组件未检测到简单的 EventEmitter - Angular2

Question

在 Angular cli 的帮助下，我正在编写我的第一个 Angular2 应用程序。我正在尝试为可用于较小屏幕的汉堡菜单编写显示/隐藏切换功能。我的应用布局如下所示：

|-- app
    |-- src
        |-- navigation
            |-- navigation.component.ts
            |-- navigation.service.ts
            |-- navigation.template.html
        |-- main.ts
        |-- main.template.html
        |-- system-config.ts
    |-- index.html

现在我只想要一个简单的功能，当我单击 navigation.template.html 中的按钮时，就像这样：

<button type="button" class="navbar-toggle collapsed" (click)="toggleMenu()">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

click 事件调用我的navigation.component.ts 中的一个方法，就像这样

togMenu: boolean = false;
//... more code then,

toggleMenu(): void {
    this.togMenu = !this.togMenu;
    this.navigationService.toggleMenuEvent.emit(this.togMenu);
}

使用同一文件夹中的服务，代码如下：

import {Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class NavigationService {
    toggleMenuEvent: EventEmitter<boolean> = new EventEmitter();
}

没什么好说的，但我需要 main.template.html 中的 Emmitted 值，所以我在类构造函数中的 main.ts 文件中监听 Event Emitter：

showMenu: boolean = false;

    constructor(private navigationService: NavigationService) {
        navigationService.toggleMenuEvent.subscribe(
            (val) => {
                this.showMenu = val;
            });
    }

但是该事件并未在父组件中被拾取。它没有被听到/识别，因此showMenu 变量始终为假。我是否应该将名称代码放入子组件中，才能听到事件，但它似乎没有冒泡到父 (main) 组件。我做错了什么。请注意，我的控制台中没有错误，我正在使用 Angular2 的候选版本。

我一直在看这个网站和其他地方，建议使用 Observables 而不是 Event Emitter，我对 Observables 一无所知，因此我这样做了。

请注意：我已经减少了示例中的代码，因此问题不会太长。

Answer 1

我想这是关于您的服务实例范围的问题。我的意思是有一个共享服务，你需要在引导你的应用程序时定义它，例如：

bootstrap(AppComponent, [ NavigationService ]);

并且不要在其providers 属性中为组件再次定义它。这样，您将共享同一个实例，并且能够共享事件发射器。

请注意，您应该在共享服务中使用Observable 或Subject 而不是EventEmitter。 EventEmitters 仅用于在组件中实现自定义事件。