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

admin管理员组

文章数量:1026989

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 ponent.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.

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 ponent.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.

• javascript
• angularjs
• typescript
• angular
• angular-ui-router

Share Improve this question Follow edited Jul 28, 2016 at 9:23 Galactic Ranger asked Jul 28, 2016 at 9:13 Galactic RangerGalactic Ranger 89233 gold badges1515 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

please see my answer about how you can use Transition (as was mentioned by Galactic Ranger) in order to get stae parameters: How to read $stateParms value in Angular2?

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 ponent.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.

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 ponent.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.

• javascript
• angularjs
• typescript
• angular
• angular-ui-router

Share Improve this question Follow edited Jul 28, 2016 at 9:23 Galactic Ranger asked Jul 28, 2016 at 9:13 Galactic RangerGalactic Ranger 89233 gold badges1515 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

please see my answer about how you can use Transition (as was mentioned by Galactic Ranger) in order to get stae parameters: How to read $stateParms value in Angular2?

本文标签： javascriptAngular 2TypeScript amp uirouterHow to get state paramsStack Overflow