Angular 2 Meteor change route reactively

Question

I'm playing with angular2 and meteor (i'm new with both) and i'd like to change route if i can find a certain document in a collection. I read in the Angular 2 Meteor tutorial that the class MeteorComponent has methods subscribe and autorun so i'm trying to use this methods to get the job done (not sure if this is the best way to do it - i didn't remove autopublish). But right now it isn't working. My component is:

import {View, OnInit, Component} from 'angular2/core'
import {MeteorComponent} from 'angular2-meteor'
import {Navbar} from 'client/navbar/navbar'
import {FakePlayground} from 'client/intro/fake-playground/fake-playground'
import {PlayerList} from 'client/player-list/player-list'
import {PlayerService} from 'client/player/player-service'
import {Player} from 'client/player/player'
import {ProtectedDirective} from 'client/directives/protected-directive'
import {SentInvitation} from 'client/invitation/sent-invitation'
import {ReceivedInvitation} from 'client/invitation/received-invitation'
import {Invitations} from 'lib/invitations'
import {Router} from 'angular2/router'

@Component({
  selector: 'intro'
})
@View({
  templateUrl: 'client/intro/intro.html',
  directives: [
    Navbar,
    PlayerList,
    FakePlayground,
    ProtectedDirective,
    SentInvitation,
    ReceivedInvitation
  ]
})
export class Intro extends MeteorComponent implements OnInit {
  currentPlayer: Player
  invitation: Mongo.Cursor<Object>

  constructor(
    public playerService: PlayerService,
    private _router:Router
  ) {
    super()
  }

  getInvitation() {
    this.subscribe('invitations', () => {
      this.invitation = Invitations.find({$or: [
        {$and: [
          {"sender._id": this.currentPlayer._id},
          {status: 1}
        ]},
        {$and: [
          {"recipient._id": this.currentPlayer._id},
          {status: 1}
        ]}
      ]})
      this.autorun(() => {
        console.log('autorun')

        if(this.invitation){
          console.log('game started')
          this._router.navigate(['Game'])
        }
      })
    })
  }

  getPlayer() {
    this.currentPlayer = this.playerService.getCurrentPlayer()
  }

  ngOnInit() {
    this.getPlayer()
    this.getInvitation()
  }
}

And in my fantasy getInvitation() called in ngOnInit should subscribe to 'invitations' collection and autorun() should check if the document is found and if it's found should change route. But i'm not getting errors neither the route change. Which should be the right way to change the route reactively to collection change?

Answer 1

Well, i was using this.autorun() the worng way. It was much simpler:

import {View, OnInit, Component} from 'angular2/core'
import {MeteorComponent} from 'angular2-meteor'
import {Navbar} from 'client/navbar/navbar'
import {FakePlayground} from 'client/intro/fake-playground/fake-playground'
import {PlayerList} from 'client/player-list/player-list'
import {PlayerService} from 'client/player/player-service'
import {Player} from 'client/player/player'
import {ProtectedDirective} from 'client/directives/protected-directive'
import {SentInvitation} from 'client/invitation/sent-invitation'
import {ReceivedInvitation} from 'client/invitation/received-invitation'
import {Invitations} from 'lib/invitations'
import {Router} from 'angular2/router'

@Component({
  selector: 'intro'
})
@View({
  templateUrl: 'client/intro/intro.html',
  directives: [
    Navbar,
    PlayerList,
    FakePlayground,
    ProtectedDirective,
    SentInvitation,
    ReceivedInvitation
  ]
})
export class Intro extends MeteorComponent implements OnInit {
  currentPlayer: Player

  constructor(
    public playerService: PlayerService,
    private _router:Router
  ) {
    super()
  }

  getPlayer() {
    this.currentPlayer = this.playerService.getCurrentPlayer()
  }

  ngOnInit() {
    this.getPlayer()
    this.autorun(() => {
      if (Invitations.findOne({
        $or: [
          {$and: [{"sender._id": this.currentPlayer._id},{status: 1}]},
          {$and: [{"recipient._id": this.currentPlayer._id},{status: 1}]}
        ]
      })) {
        this._router.navigate(['Game'])
      }
    })
  }
}