监听 EventEmitter 不适用于观察者 (Alpha 44)

Question

我把我的数据放在一个服务中，所以如果它改变了每个组件听它并用新数据更新它们的组件。

但一切都连接在一起，我没有收到任何错误，但它在触发时没有收到事件！

这是服务：

    import {EventEmitter, Injectable} from 'angular2/angular2';
    import {PlayerModel} from '../../models/players/players.ts';

    @Injectable()
    export class PlayerService {
        playerListModified: EventEmitter = new EventEmitter();
        players: Array<PlayerModel> = new Array<PlayerModel>();

        addPlayer(player: PlayerModel) {
            this.players.push(player);
            this.playerListModified.next(this.players);
        }
    }

Here is the Component that Listen to the Service Change

    import {Component, Input, NgFor} from 'angular2/angular2';
    import {PlayerModel} from '../../models/players/player.ts';
    import {PlayerService} from '../../services/players/playerService.ts';

    @Component({
        selector: 'best-score-board',
        templateUrl: 'app/components/leaderboards/bestScoreBoard.html',
        directives: [NgFor],
        providers: [PlayerService]
    })
    export class BestScoreBoardComponent {
        players: Array<PlayerModel>;

        constructor(playerService: PlayerService) {
            playerService.playerListModified.observer({
                next: (players) => console.log('test2')
            });

            this.players = playerService.players;
        }
    }


What am i doing wrong ?


**EDIT** 

Here is where i call the service

import {Component, Output, EventEmitter} from 'angular2/angular2';
import {PlayerModel} from '../../models/players/player.ts';
import {PlayerService} from '../../services/players/playerService.ts';

@Component({
     selector: 'create-player-form',
     templateUrl: 'app/components/players/createPlayerForm.html',
     providers: [PlayerService]
 })
export class CreatePlayerFormComponent {
    playerService: PlayerService;

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

    createPlayer(name, score) {
        this.playerService.addPlayer(new PlayerModel(name.value, score.value));
        name.value = '';
        score.value = '0';
    }
 }

如果我在服务中执行 console.log，我会收到 PlayerModel。

Answer 1

当您将 ProviderService 添加到 Component 装饰器中的 providers 时，将为该组件（及其子组件）创建 ProviderService 的新实例。

@Component({
  // ...
  // new instance of PlayerService will be created 
  // for BestScoreBoardComponent
  providers: [PlayerService]
})
export class BestScoreBoardComponent { /* ... */ }

@Component({
  // ...
  // and again new instance of PlayerService will be created
  // at this time for CreatePlayerFormComponent
  providers: [PlayerService]
})
export class CreatePlayerFormComponent { /* ... */ }

如果您想对这两个组件使用 PlayerService 的单个实例，您应该在它们共同的父组件的 providers 或 bootstrap 函数中指定它。

@Component({
  // ... 
  // providers: [PlayerService] <- you should remove this line
})
export class BestScoreBoardComponent { /* ... */ }

@Component({
  // ... 
  // providers: [PlayerService] <- and this line too
})
export class CreatePlayerFormComponent { /* ... */ }

// ...

bootstrap(AppComponent, [PlayerService]); // <-- Here you go.

监听 EventEmitter 不适用于观察者 (Alpha 44)

Listenning to EventEmitter doesnt work with observer (Alpha 44)

eventemitter

angular