Angular2事件管理器订阅？

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

我将我的布局分为两部分：展示玩家的排行榜和创建新玩家的CreatePlayer

我有一个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);
    }
}

类型错误：playerService.PlayerListChange.toRx（…）。订阅不是函数

编辑2：

这是我的新代码，但仍然没有调用listenner！（没有发生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);
    } 
}

import{Component，View，EventEmitter，FORM_指令，FormBuilder，ControlGroup，Control，Validators，NgIf}来自'angular2/angular2'；
从“/Player”导入{Player}；
从“/player service”导入{PlayerService}；
@组成部分({
选择器：“创建玩家”，
绑定：[PlayerService]
})
@看法({
templateUrl:“./src/players/create player.html”，
指令：[表格_指令，NgIf]
})
导出类CreatePlayer{
PlayPerform：对照组；
playerService：playerService；
构造函数（生成器：FormBuilder，playerService:playerService）{
this.newplayer=neweventemitter（）；
this.playexper=builder.group({
标签：[''，验证器。必需]，
名称：[''，验证器。必需]，
分数：[''，验证者。必填]
});
this.playerService=playerService；
}
addPlayer（formValue）{
var player=新玩家（）；
player.tag=formValue.tag；
player.name=formValue.name；
player.score=formValue.score；
this.playerService.addPlayer（player.tag、player.name、player.score）；
}
}
从'angular2/angular2'导入{EventEmitter}；
从“/Player”导入{Player}；
导出类PlayerService{
玩家：阵型；
PlayerListChange:EventEmitter；
构造函数（）{
var player=新玩家（）；
player.tag=“#ROCK”；
player.name=“菜鸟”；
player.score=102；
this.players=[player]；
this.playersListChange=新的EventEmitter（）；
}
addPlayer（标记：string，名称：string，分数：number）：无效{
var player=新玩家（）；
player.tag=tag；
player.name=名称；
player.score=分数；
这个。玩家。推（玩家）；
this.playersListChange.next（this.players）；
}
}
从'angular2/angular2'导入{组件，视图}；
从“./Header”导入{Header}；
从“../Leadboards/Leadboard”导入{Leadboard}；
从“../players/create player”导入{CreatePlayer}；
从“../players/Player”导入{Player}；
从“../players/PlayerService”导入{PlayerService}；
从'rx.all'导入{Observer}；
@组成部分({
选择器：“布局”，
绑定：[PlayerService]
})
@看法({
templateUrl:'./src/layout/layout.html'，
指令：[标题、排行榜、CreatePlayer]
})
导出类布局{
玩家：阵型；
playerService：playerService；
playersChanged:Observer=Observer.create(
（玩家：数组）=>{this.playerListChange（玩家）；}，
（错误）=>{}，
() => { });
构造函数（playerService:playerService）{
这个.players=[]；
this.playerService=playerService；
this.playerService.playerListChange.toRx（）.subscribe（this.playerChanged）；
}
玩家列表更改（玩家：阵列）：无效{
控制台日志（播放器）；
} 
}

我也试过了 （玩家）=>{this.playerListChange（玩家）；}

和 玩家列表更改（玩家）：无效{ 控制台日志（播放器）；

---

}

我认为这一行

this.players=playerService.players应该是
this.players=playerService。除此之外，您使用的是什么ng2版本？升级到a40。在a39中，toRx（）返回EventEmitter本身时，他们在alpha 40中解决了一个错误。不要连接到它，事实上，它将被完全移除。toRx（）。在a39中已经从http调用中删除了，并且它将从EventEmitter中消失。那么，如果要删除它，最好的方法是什么呢？我希望我的模型在玩家列表更改时发送一个事件。如果我自己不清楚，很抱歉<代码>toRx（）
将被删除，但您仍可以订阅EventEmitter。你做得很好，在未来的发行版中，你必须直接订阅，而不必使用
toRx（）
，就像
playerListChange.subscribe（）
，但现在要坚持使用
toRx（）
；）我换成了阿尔法40。一切似乎都进行得很顺利（没有错误），但听众从未接到过电话！我的事件是->this.playersListChange.next（this.players）；而侦听器this.playerService.playerListChange.toRx（）.subscribe（this.playerListChange）；其中playerListChange->playerListChange（玩家：玩家）：void{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);
    } 
}