Question

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

|-- 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变量始终为false。我是否应该将名称代码放入子组件中，以便听到事件，但它似乎没有冒泡到父（main）组件。我做错了什么。请注意，我的控制台中没有错误，我正在使用Angular2的候选版本。

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

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

Answer 1

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

bootstrap(AppComponent, [ NavigationService ]);

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

请注意，您应该在共享服务中使用Observable或Subject代替EventEmitter。 EventEmitter只能在组件中实现自定义事件。

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

1 个答案: