角- RouteParams

Question

我目前正在测试角阿尔法45，特别是路由，并通过实现参数路由问题。我已经为一个特定实体的详细视图创建了一个组件。

@Component({
    templateUrl: 'app/components/projekt/projekt.detail.html',
    directives: [FORM_DIRECTIVES]
})
export class ProjektDetailComponent {
    id: string;
    constructor(params: RouteParams){
        this.id = params.get('id');
    }   
}

模板如下所示，只需显示参数"id"：<h1>Projekt Details: {{id}}</h1> -- RouteConfig如下所示：

@RouteConfig([
  { path: '/', component: StartComponent, as:'Start'} ,
  { path: '/projekte', component: ProjektOverviewComponent, as:'Projekte'},
  { path: '/projekte/:id', component: ProjektDetailComponent, as:'ProjektDetail'},
  { path: '/projekte/neu', component: NeuesProjektComponent, as:'ProjektNeu'}    
])

上面显示的链接和RouteConfig就像角文档中的例子。<a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Details</a>

因此，当我导航到详细视图(例如，127.0.0.1:8080/src/#/projekte/1)时，会得到以下错误，它显示在浏览器的控制台中(我在Edge、Firefox 42、Chrome 46上进行了测试)：

EXCEPTION: Cannot resolve all parameters for ProjektDetailComponent(?). Make sure they all have valid type or annotations.


    18:25:41.376 EXCEPTION: Cannot resolve all parameters for ProjektDetailComponent(?). Make sure they all have valid type or    annotations.1 angular2.dev.js:21984:9
BrowserDomAdapter</BrowserDomAdapter.prototype.logError() angular2.dev.js:21984
BrowserDomAdapter</BrowserDomAdapter.prototype.logGroup() angular2.dev.js:21995
ExceptionHandler</ExceptionHandler.prototype.call() angular2.dev.js:4426
PlatformRef_</PlatformRef_.prototype._initApp/</<() angular2.dev.js:19685
NgZone</NgZone.prototype._notifyOnError() angular2.dev.js:10746
NgZone</NgZone.prototype._createInnerZone/errorHandling.onError() angular2.dev.js:10654
run() angular2.dev.js:141
NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:10669
zoneBoundFn() angular2.dev.js:111
lib$es6$promise$$internal$$tryCatch() angular2.dev.js:1507
lib$es6$promise$$internal$$invokeCallback() angular2.dev.js:1519
lib$es6$promise$$internal$$publish() angular2.dev.js:1490
[4]</</</<() angular2.dev.js:219
NgZone</NgZone.prototype._createInnerZone/<.$scheduleMicrotask/</microtask() angular2.dev.js:10701
run() angular2.dev.js:138
NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:10669
zoneBoundFn() angular2.dev.js:111
lib$es6$promise$asap$$flush() angular2.dev.js:1301

你有什么意见建议？

Answer 1

正如@EricMartinez所提到的，您必须正确导入RouteParams。我玩我的柱塞，并得到了完全相同的错误。

我意识到我是从'angular2/angular2'导入的，需要从'angular2/router'导入

这是一个柱塞，它做的正是你想要的，但有一个“汽车”组件。Plunker

Answer 2

在注入DataService & RouteParams时，我也遇到了同样的问题，必须在构造函数中使用@Inject。这就是我所做的。

import {Component, Inject, View} from 'angular2/angular2';
import {RouteParams} from 'angular2/router';

@Component({
    selector: 'about'
})
@View({
    template: 'This is {{id}} about page {{name}}'
})
export class AboutComponent
{
    name: string = "Sandeep";
    id: number;
    constructor( @Inject(RouteParams) params: RouteParams)
    {
        this.id = +params.get('id');
    }
}

希望它能帮到你。

Answer 3

这与您所遇到的问题无关，但值得指出的是，在迁移到Angular2 RC3 ou高等版时，您将面临同样的问题。路由已完全更改，因此组件将再次失败，引发相同的异常。

在RC3或更高版本中，您将需要在没有名称的情况下重写您的路由，并且您的组件将需要从‘@ar角/路由器’导入ActivatedRoute，以便读取您的参数。请参见：

constructor(private activatedRoute: ActivatedRoute) {

     this.activatedRoute.params.subscribe(params => {
            this.categoryUrl = params['categoryUrl'];

}