Question

使用Ui-Router 在Angular1中，stateparam值即将使用$ state.params

如何在ANgular2中做同样的事情

我试过这样 this._uiRouter.globals.params.id

它的工作，但它不是一个合适的解决方案，即使我使用webstrome编辑器，编辑器还显示错误，如 TS2339属性ID不会退出typeStateParams ，

请帮我做正确的方法

Answer 1

您可以在配置URL状态时从 Transition 可导出对象获取状态参数：

import {Transition} from "ui-router-ng2";
...
export const personState = {
  name: 'person',
  url: '/people/:personId',
  component: Person,
  resolve: [
    { 
      token: 'stateParams', 
      deps: [Transition],
      resolveFn: (trans) => trans.params()
    }
  ]
};

然后在你的组件代码中：

import {Component, Input} from '@angular/core';
import {UIROUTER_DIRECTIVES, Transition} from 'ui-router-ng2';

@Component({  
  directives: [UIROUTER_DIRECTIVES],
  template: `
    <h2>stateParams</h2>
    <pre>{{ stateParams | json }}</pre>
`})

export class Person implements OnInit { 
  @Input() stateParams;

  ngOnInit() {
    // here you will have all passed state params
    console.log(this.stateParams);
  }

  constructor() {
  }
}

来自https://ui-router.github.io/tutorial/ng2/hellosolarsystem#live-demo：https://plnkr.co/edit/IVGx0p9lQr1yKqgwZT4X

的修改过的plunker

注意2个文件：

state.ts
组件/ person.ts

Answer 2

这几天是Simpeler。在您的构造函数中注入以下内容：

import {StateService} from '@uirouter/core';

private stateService: StateService

然后您可以通过此变量访问参数：

this.stateService.params

如何在Angular2中读取$ stateParms值？

2 个答案: