如何使用angular2 ui router form ts code将参数从一种状态传递到另一种状态？

Question

我是 Angular2 的新手。我尝试了快速启动应用程序。现在我想用 angular2 ui 路由器做同样的应用程序，我在这里很震惊

我有一些清单项目。当我单击一个项目时，它仅在该页面中显示该项目的详细信息，我有一个按钮（MoreDetais）。如果用户单击该按钮 它应该被重定向到项目详细信息页面。此状态需要项目 ID。

我正在使用 angular2-ui-router。（就像 angular1 中的 stateprovider）

我可以通过这样做来改变状态

Ts：

import {UIRouter} from "ui-router-ng2";

constructor(private _uiRouter:UIRouter){}

gotoDetail(): void {
//this._uiRouter.stateService.go('app.heroesdetail');// its working
// this._uiRouter.stateService.go('app.heroesdetail',{this.selectedHero.id})
}

HTML：

<ul class="heroes">
  <li *ngFor="let hero of heroes"[class.selected]="hero === selectedHero"
   (click)="onSelect(hero)">
     <span class="badge">{{hero.id}}</span> {{hero.name}}
        <button class="delete" (click)="delete(hero);     $event.stopPropagation()">x</button>
  </li>
</ul>
   <div *ngIf="selectedHero">
     <h2>
         {{selectedHero.name | uppercase}} is my hero
     </h2>
     <button (click)="gotoDetail()">View Details</button>
   </div>

请帮帮我？

Answer 1

我得到了解决方案，只是我做了愚蠢的事情

之前

   gotoDetail(): void {
this._uiRouter.stateService.go('app.heroesdetail',{this.selectedHero.id})

}

现在

gotoDetail(): void {
     this._uiRouter.stateService.go('app.heroesdetail',{id:this.selectedHero.id})

}

它正在工作

Answer 2

只需使用路由器的navigateByUrl 或navigate 方法从一种状态导航到另一种状态，您也可以通过这样的导航传递参数

this.router.navigate(['Route_path',this.selectedHero.id]);

或者像这样使用navigateByUrl，

this.router.navigateByUrl('/Route_path',this.selectedHero.id);

有关路由和导航的更多信息，您可以在此处阅读

• https://angular.io/docs/ts/latest/guide/router.html