Angular 2, TypeScript & ui-router - How to get state params

Question

Hey everyone I was wondering how to get the state params from a state using Angular 2, TypeScript & ui-router. I tried reviewing the new docs but they don't seem to have much documentation for ng2 ui-router.

Below I have added my component.ts for reference. Any help would be greatly appreciated.

import {Component} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
import {UIRouter} from 'ui-router-ng2/router';

@Component({
  selector: 'Detail',
  template: require('./detail.html'),
  providers: [HTTP_PROVIDERS]
})

export class Detail {
  constructor(private uiRouter:UIRouter) {
    console.log('uiRouter ', this.uiRouter.globals.params);
  }
}

In Angular 1 I would do this as follows:

(function() {
  'use strict';

  angular
  .module('private')
  .controller('Controller', Controller);

  function Controller($state) {
    var vm = this;
    console.log($state.params.studentID);
  }
})();

Again any advice would be greatly appreciated.

Galactic Ranger Galactic Ranger · Accepted Answer · 2016-07-29T06:24:31

I was able to resolve the state param issue I was having by doing the following:

import {Component} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
import {UIROUTER_DIRECTIVES} from 'ui-router-ng2';
import {UIRouter} from 'ui-router-ng2/router';

@Component({
  selector: 'Detail',
  template: require('./detail.html'),
  directives: [UIROUTER_DIRECTIVES],
  providers: [HTTP_PROVIDERS]
})

export class Detail {
    public detailParam: any;

    constructor(private uiRouter:UIRouter) {
      this.detailParam = this.uiRouter.globals.params;
      console.log('state params: ', this.detailParam);
  }
}

But after a little more research I found better documentation on ui-router for Angular 2 here: https://ui-router.github.io/ng2/

Looks like the correct way of dealing with state params is with

import {Transition} from "ui-router-ng2"

And using

trans.params().detailID

I was not able to get the trans.params() to work at this particular moment but at least I found a temporary solution and better documentation to find the proper solution.

Angular 2, TypeScript & ui-router - How to get state params

2 Answers