Angular2 EventEmitter订阅？

Question

我昨天开始学习Angular2，而且我一直在理解如何订阅EventEmitter。

我的布局分为2部分排行榜，显示玩家和创建新播放器的CreatePlayer。

我有一个持有PlayerList的PlayerService。因此，当我在CreatePlayer中添加一个玩家时，会在PlayerList中添加一个新玩家。

但我需要在布局中反映播放列表更改，以便排行榜[播放器]中的属性重新绑定或更新。

这是我的代码：

import {Component, View} from 'angular2/angular2';
import {Header} from './header';
import {Leaderboard} from '../leaderboards/leaderboard';
import {CreatePlayer} from '../players/create-player';
import {PlayerService} from '../players/player-service';
import {Player} from '../players/player';

@Component({
    selector: 'layout',
    bindings: [PlayerService]
})
@View({
    templateUrl: './src/layout/layout.html',
    directives: [Header, Leaderboard, CreatePlayer]
})
export class Layout {
    players: Array<Player>;

    constructor(playerService: PlayerService) {
        this.players = playerService.players;
    }
}

import {EventEmitter} from 'angular2/angular2';
import {Player} from './player';

export class PlayerService {
    players: Array<Player>;
    playersListChange: EventEmitter;

    constructor() {       
        this.players = [];
        this.playersListChange = new EventEmitter();
    }

    addPlayer(tag: string, name: string, score: number) {
        var player = new Player();
        player.tag = tag;
        player.name = name;
        player.score = score;

        this.players.push(player);
        this.playersListChange.next(this.players);
    }
}

我如何订阅此playerListChange事件？

我在Layout Constructor中尝试过：

playerService.playersListChange.observer({ next: (value) => this.onPlayersChange(value) });

但它不起作用。

你们能告诉我如何订阅这个EventEmitter吗？

编辑：

试了这个没有成功，

playerService.playerListChange.toRx().subscribe(this.onPlayerListChange);

onPlayerListChange(value) {
        this.players = value;
}

TypeError：playerService.playersListChange.toRx（...）。subscribe不是函数

编辑2：

这是我的新代码，但仍然没有调用监听器！ （没有console.log发生）我在哪里犯了错误？

import {Component, View, EventEmitter, FORM_DIRECTIVES, FormBuilder,           ControlGroup, Control, Validators, NgIf} from 'angular2/angular2';
import {Player} from './player';
import {PlayerService} from './player-service';

@Component({
    selector: 'create-player',
    bindings: [PlayerService]
})
@View({
    templateUrl: './src/players/create-player.html',
    directives: [FORM_DIRECTIVES, NgIf]
})
    export class CreatePlayer {
    playerForm: ControlGroup;
    playerService: PlayerService;

    constructor(builder: FormBuilder, playerService: PlayerService) {
        this.newplayer = new EventEmitter();

        this.playerForm = builder.group({
            tag: ['', Validators.required],
            name: ['', Validators.required],
            score: ['', Validators.required]
        });

        this.playerService = playerService;
    }

    addPlayer(formValue) {
        var player = new Player();
        player.tag = formValue.tag;
        player.name = formValue.name;
        player.score = formValue.score;

        this.playerService.addPlayer(player.tag, player.name, player.score);
    }
}

import {EventEmitter} from 'angular2/angular2';
import {Player} from './player';

export class PlayerService {
    players: Array<Player>;
    playersListChange: EventEmitter;

    constructor() {
        var player = new Player();
        player.tag = "#ROCK";
        player.name = "Rookie";
        player.score = 102;
        this.players = [player];

        this.playersListChange = new EventEmitter();
    }

    addPlayer(tag: string, name: string, score: number): void {
        var player = new Player();
        player.tag = tag;
        player.name = name;
        player.score = score;
        this.players.push(player);
        this.playersListChange.next(this.players);
    }
}

import {Component, View} from 'angular2/angular2';
import {Header} from './header';
import {Leaderboard} from '../leaderboards/leaderboard';
import {CreatePlayer} from '../players/create-player';
import {Player} from '../players/player';
import {PlayerService} from '../players/player-service';
import {Observer} from 'rx.all';

@Component({
    selector: 'layout',
    bindings: [PlayerService]
})
@View({
    templateUrl: './src/layout/layout.html',
    directives: [Header, Leaderboard, CreatePlayer]
})
export class Layout {
    players: Array<Player>;
    playerService: PlayerService;
    playersChanged: Observer = Observer.create(
        (players: Array<Player>) => { this.playerListChange(players); },
        (error) => { },
        () => { });

    constructor(playerService: PlayerService) {
        this.players = [];
        this.playerService = playerService;

    this.playerService.playersListChange.toRx().subscribe(this.playersChanged);
    }

    playerListChange(players: Array<Player>) : void {
        console.log(players);
    } 
}

我也试过了     （玩家）=＆gt; {this.playerListChange（玩家）; }，

和     playerListChange（players）：void {         执行console.log（球员）;     }