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

时间:2015-11-02 14:43:08

标签: angular eventemitter

我将数据放入服务中,因此如果更改了每个组件,请听取它并使用新数据更新其组件。

但是所有内容都连接在一起,我没有收到任何错误,但是当它被解雇时它没有收到该事件!

这是服务:

    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。

1 个答案:

答案 0 :(得分:3)

providers添加到Component装饰器中的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. 函数中指定它。

Handler handler;

 @Override
protected void onCreate(Bundle savedInstanceState)
{
   ....
   handler = new Handler();
}

 @Override
protected void onResume() 
{
     ....
     handler.postDelayed(myRunnable, 60 * 1000);
}

 @Override
protected void onPause() 
{
     ....
     handler.removeCallbacks(myRunnable);
}

 private final Runnable myRunnable= new Runnable() {
    @Override
    public void run()
    { 
       downloadNewJsonData();  
       adapter.notifyDataSetChanged();
       handler.postDelayed(myRunnable, 60 * 1000);
    }
 }