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

我正在用角度cli的一点帮助编写我的第一个Angular2应用程序。我正在尝试为汉堡包菜单编写一个可用于较小屏幕的显示/隐藏切换功能。我的应用程序布局看起来像这样：父组件无法检测到简单的EventEmitter - 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文件侦听事件发射器：

showMenu: boolean = false; 

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

然而，在该事件没有回升父组件。它没有被听到/识别，因此showMenu变量总是为false。我应该将名称代码放入子组件中吗？可以听到该事件，但似乎没有冒泡到父组件（main）。我做错了什么。请注意，我的控制台中没有错误，我正在使用Angular2的候选版本。

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

请注意：我减少了我的例子中的代码，所以问题不是太长。

来源

2016-05-18 Mark Sandman

在NavigationService中，事件名为toggleMenuEvent，在你的'main.ts'中你订阅了'showMenuEvent'。 – rinukkusu

排字错误！ –

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

bootstrap(AppComponent, [ NavigationService ]);

，而不是在他们providers属性的部件重新定义它。这样你将共享相同的实例，并能够共享事件发射器。

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

来源

2016-05-18 12:06:10

我已经将该服务添加到'bootstrap'，并且没有在组件的providers属性中重复它。我会考虑使用Observables或Subjects，而我只是不能/没有找到一个示例/教程 –

也许这个链接的示例：https：//angular.io/docs/ts/latest/cookbook/component- communication.html＃！＃双向服务;-) –

太棒了！感谢您的链接......哦，你是对的...... main.ts中'providers'属性有重复！ –

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

回答

相关问题