我目前正在测试 Angular Alpha 45,尤其是路由,并且通过使用参数实现路由时遇到了问题。我为一个特定实体的详细 View 创建了一个组件。
@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'}
])
上面显示的Link和RouteConfig就像angular文档中的例子一样。
<a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Details</a>
因此,当我导航到详细 View (例如 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
您有什么建议吗?
最佳答案
正如@EricMartinez 提到的,您必须正确导入 RouteParams。我在玩我的 plunker 并且得到了完全相同的错误。
我意识到我正在从 'angular2/angular2'
导入并且需要从 'angular2/router'
导入
这是一个 plunker,它完全符合您的要求,但带有“汽车”组件。 Plunker
关于routing - Angular - 路由参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33572642/