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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With