Простой EventEmitter не обнаружен родительским компонентом - Angular2

Question

Я пишу свое первое приложение Angular2 с небольшой помощью от углового кли. Я пытаюсь написать функцию show/hide toggle для меню гамбургера, которое доступно для небольших экранов. Моя раскладка приложения выглядит так:

|-- 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> 

событие щелчка вызывает метод в моем 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, так что я слушаю на эмиттер событий в main.ts файла в конструкторе класса:

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 в совместно используемых услугах. EventEmitter s предназначены только для реализации пользовательских событий в компонентах.