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
,但我不知道为什么。
呈现的代码对我来说很不错。我会尝试删除HomeComponent并查看TokenComponent是否开始正常工作。用你的应用程序创建并发布一个plunker会有所帮助。 –