Question

嘿大家我想知道如何使用Angular 2，TypeScript＆amp; amp; UI的路由器。我尝试查看新文档，但他们似乎没有很多关于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（）在这个特定时刻工作，但至少我找到了一个临时解决方案和更好的文档来找到合适的解决方案。

Answer 2

请参阅我的答案，了解如何使用 Transition （如Galactic Ranger所述）以获取stae参数：How to read $stateParms value in Angular2?

Angular 2，TypeScript＆amp; ui-router - 如何获取状态参数

2 个答案: