javascript - 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

通过执行以下操作，我能够解决状态参数问题:

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() 在这个特定时刻工作，但至少我找到了一个临时解决方案和更好的文档来找到合适的解决方案。