如何在Angular2中读取$ stateParms值?

问题描述

使用Ui路由器在Angular1中，stateparam值使用$ state.params

Using Ui-RouterIn Angular1 The stateparam value is coming using $state.params

如何在ANgular2中做同样的事情

How to do the same thing in ANgular2

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

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

it's working, But its not a proper solution, even I am using webstrome editor,the editor also showing error like TS2339 Property id does not exits on typeStateParams,

请帮助我采取正确的方法

Please help me do proper way

推荐答案

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

you can get state parameters from the Transition exportable object while configuring URL state:

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

然后在您的组件代码中输入

then in you component code:

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

注意2个文件:

1. state.ts
2. components/person.ts

这篇关于如何在Angular2中读取$ stateParms值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！