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

Posted 2023-03-13

【中文标题】Angular 2、TypeScript 和 ui-router - 如何获取状态参数

【英文标题】：Angular 2, TypeScript & ui-router - How to get state params

【发布时间】：2016-12-02 14:04:45

【问题描述】：

大家好，我想知道如何使用 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);
  
)();

再次感谢任何建议。

【参考方案1】：

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

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

【讨论】：

现在即使我也有同样的疑问，如果你得到正确的解决方案，请发表评论。