Angular 2、TypeScript 和 ui-router - 如何获取状态参数

Question

大家好，我想知道如何使用 Angular 2、TypeScript 和 ui-router 从状态中获取状态参数。我尝试查看新文档，但他们似乎没有太多关于 ng2 ui-router 的文档。

下面我添加了我的 component.ts 以供参考。任何帮助将不胜感激。

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);
  }
}

在 Angular 1 中，我会这样做：

(function() {
  'use strict';

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

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

再次感谢任何建议。

Answer 1

请查看我关于如何使用 Transition（如 Galactic Ranger 所述）以获得 stae 参数的回答：How to read $stateParms value in Angular2?

Answer 2

我能够通过执行以下操作解决我遇到的状态参数问题：

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);
  }
}

但经过更多研究后，我在这里找到了关于 Angular 2 的 ui-router 的更好文档： https://ui-router.github.io/ng2/

看起来处理状态参数的正确方法是使用

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

并使用

trans.params().detailID

在这个特定的时刻我无法让 trans.params() 工作，但至少我找到了一个临时解决方案和更好的文档来找到合适的解决方案。