I am using Aurelia framework. I want to fetch navigationInstruction info in app file(app.ts/app.js) every time user navigate to new route/page.

I have tried to fetch this information in the life-cycle events(activate and bind) of app, but no information is available.

Can anybody help me to solve this issue.

Thanks in advance.

I am using Aurelia framework. I want to fetch navigationInstruction info in app file(app.ts/app.js) every time user navigate to new route/page.

I have tried to fetch this information in the life-cycle events(activate and bind) of app, but no information is available.

Can anybody help me to solve this issue.

Thanks in advance.

• javascript
• aurelia

1 Answer 1

subscribe to the router's navigation "success" event:

import {EventAggregator} from 'aurelia-event-aggregator';
import {inject} from 'aurelia-dependency-injection';

@inject(EventAggregator)
export class App {
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  navigationSuccess(event) {
    let instruction = event.instruction;    
    // todo: do something with instruction...
  }

  attached() {
    this.subscription = this.eventAggregator.subscribe(
      'router:navigation:success',
      this.navigationSuccess.bind(this));
  }

  detached() {
    this.subscription.dispose();
  }
}

Here's a slightly different version using ES7 function binding and ES6 destructuring:

import {EventAggregator} from 'aurelia-event-aggregator';
import {inject} from 'aurelia-dependency-injection';

@inject(EventAggregator)
export class App {
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  navigationSuccess({ instruction }) {
    // todo: do something with instruction...
  }

  attached() {
    this.subscription = this.eventAggregator.subscribe(
      'router:navigation:success',
      ::this.navigationSuccess);
  }

  detached() {
    this.subscription.dispose();
  }
}