2017-06-04 200 views
0

目前我正在使用Angular4。现在我有一个问题。我有这个HeaderService改变在HeaderComponent标题:事件不发射

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

@Injectable() 
export class HeaderService { 

    @Output() 
    public fire: EventEmitter<String> = new EventEmitter(); 

    constructor() { 
    } 

    public changeTitle(title: string) { 
     console.log("Want to change title to: " + title); 

     this.fire.emit(title); 
    } 

    public getTitle(): EventEmitter<String> { 
     return this.fire; 
    } 

} 

这是我HeaderComponent

import {Component, EventEmitter, OnInit} from "@angular/core"; 
import {HeaderService} from "../../services/header.service"; 

@Component({ 
    selector: 'header', 
    templateUrl: './header.component.html' 
}) 
export class HeaderComponent implements OnInit { 

    private title: string = "felixoi.net"; 
    private subscription: EventEmitter<String>; 

    constructor(private headerService: HeaderService) { 
    } 

    ngOnInit(): void { 
     console.log("Loading HeaderComponent"); 

     this.subscription = this.headerService.getTitle().subscribe((title: string) => { 
      console.log("Changed title to: " + title); 

      this.title = title; 
     }); 
    } 
} 

在我HomeComponent我使用这项服务来改变标题:

import {Component, OnInit} from '@angular/core'; 
import {HeaderService} from "../shared/services/header.service"; 

@Component({ 
    selector: 'home', 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent implements OnInit { 

    constructor(private headerService: HeaderService) { 
    } 

    ngOnInit(): void { 
     console.log("Loading HomeComponent"); 

     this.headerService.changeTitle("Home"); 
    } 

} 

我在我的TokenService中有完全相同的调用,但在此组件中,相同的代码不起作用。

import { Component } from '@angular/core'; 
import {HeaderService} from "../shared/services/header.service"; 

@Component({ 
    selector: 'token', 
    templateUrl: './token.component.html' 
}) 
export class TokenComponent implements OnInit { 

    constructor(private headerService: HeaderService) { 
    } 

    ngOnInit(): void { 
     console.log("Loading TokenComponent"); 

     this.headerService.changeTitle("Tokens"); 
    } 

} 

我在我的代码中创建了一些调试消息。这是控制台输出:

Loading HeaderComponent 
Loading HomeComponent 
Want to change title to: Home 
Changed title to: Home 
Loading TokenComponent 
Want to change title to: Tokens 

它表明事件不会发出对TokenComponent,但我不知道为什么。

+0

呈现的代码对我来说很不错。我会尝试删除HomeComponent并查看TokenComponent是否开始正常工作。用你的应用程序创建并发布一个plunker会有所帮助。 –

回答

0

我发现了这个问题。

该模块是导入乘法次数,因此存在不同的实例,也有不同的发射器可供订阅。