Routing 角路线图

我目前正在测试Angular Alpha 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”：

Projekt详细信息：{{id}

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与angular文档中的示例类似。

详细信息

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

异常：无法解析ProjektDetailComponent（？）的所有参数。确保它们都具有有效的类型或批注。
18:25:41.376异常：无法解析ProjektDetailComponent（？）的所有参数。确保它们都有有效的类型或注释。1 angular2.dev.js:21984:9
BrowserDomAdapter在注入我的
数据服务
和
路由图
时，我也遇到了同样的问题，必须在构造函数中使用
@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');
    }
}

希望它能帮助您。
正如@EricMartinez提到的，您必须正确导入RouteParams。我在玩我的扑克牌，也犯了同样的错误

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

这是一个plunker，它完全符合您的要求，但带有“汽车”组件
 这与您遇到的问题无关，但值得一提的是，在迁移到Angular2 RC3时，您将面临同样的问题。路由已完全更改，因此组件将再次失败并引发相同的异常

在RC3或更高版本中，您需要重写没有名称的路由，并且您的组件需要从“@angular/router”导入ActivatedRoute以读取您的参数。见：

constructor(private activatedRoute: ActivatedRoute) {

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

}

对于angular-2.rc3+，您可以使用此代码段

post.component.ts

app.routes.ts

main.ts

希望这有帮助
 也许是个明显的问题，但你导入了RouteParams吗？是的，我导入了RouteParams。它变得更加奇怪。在我同事的电脑上，它工作得很好。所以我在我的笔记本电脑上测试了它，但也有同样的问题。通过我们的Git回购协议，代码是相同的。所以，也许我们得到了不同的typescript编译器版本，这可能是原因。但这听起来真的很奇怪。我很好奇，在
onDestroy
中是否必须取消订阅
，或者Angular的最新版本是否能为我们解决这个问题？
constructor(private activatedRoute: ActivatedRoute) {

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

}

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component(
   selector: 'projekte'
)
export class ProjekteComponent {
    private id: string;
    constructor(private route: ActivatedRoute) {
    }

    private sub;
    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            this.id = params['id'];
        });
    }
    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

export const routes: RouterConfig = [
    { path: 'projekte/:id', component: ProjekteComponent }
];
export const appRouterProviders = [
    provideRouter(routes);
];

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [
    appRouterProviders
]);