[SOLVED] Angular2-Meteor: router.navigate and callback of collection.update

angular
1

Hi all,

I am attempting to modify the tutorial code after Step 7 in order to redirect the user to the list of parties after a successful Parties.update (in PartyDetails).

Here, my modified party-details.ts:

import { Component } from '@angular/core';
import { RouteParams, RouterLink, Router } from '@angular/router-deprecated';
import {Parties} from '../../../collections/parties.ts';

@Component({
  selector: 'party-details',
  templateUrl: '/client/imports/party-details/party-details.html',
  directives: [RouterLink]
})
export class PartyDetails {
  party: Party;

  constructor(private router : Router, params: RouteParams) {
    var partyId = params.get('partyId');
    this.party = Parties.findOne(partyId);
  }

  saveParty(party : Party) {
     Parties.update(party._id, {
       $set: {
         name: party.name,
         description: party.description,
         location: party.location
       },
     },
     (err, result)=>{
       if (result) this.router.navigate(['/PartiesList']);
     });
   }
 }

The redirection works but the list of parties is empty. The constructor of PartiesList is called, the cursor is instantiated, but the template is not updated.

The class PartiesList is not modified:

import { Component }   from '@angular/core';
import { Parties }     from '../../../collections/parties';
import { PartiesForm } from '../parties-form/parties-form';
import { Mongo }       from 'meteor/mongo';
import { RouterLink }  from '@angular/router-deprecated';

@Component({
  selector: 'parties-list',
  templateUrl: '/client/imports/parties-list/parties-list.html',
  directives: [PartiesForm, RouterLink]
})
export class PartiesList {
  parties: Mongo.Cursor<Party>;

  constructor() {
    this.parties = Parties.find();
  }

  removeParty(party : Party) {
    Parties.remove(party._id);
  }
}

Thanks

Solution :

this.router.navigate must be called in the zone :

import { Component, NgZone } from '@angular/core';
import { RouteParams, RouterLink, Router } from '@angular/router-deprecated';
import {Parties} from '../../../collections/parties.ts';

@Component({
  selector: 'party-details',
  templateUrl: '/client/imports/party-details/party-details.html',
  directives: [RouterLink]
})
export class PartyDetails {
  party: Party;

  constructor(private zone: NgZone, private router : Router, params: RouteParams) {
    var partyId = params.get('partyId');
    this.party = Parties.findOne(partyId);
  }

  saveParty(party : Party) {
     Parties.update(party._id, {
       $set: {
         name: party.name,
         description: party.description,
         location: party.location
       },
     },
     (err, result)=>{
      this.zone.run(()=>this.router.navigate(['PartiesList']));
     });
   }
 }
1 Like