我目前正在测试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”:
<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与角度文档中的示例类似。
<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
你有什么建议吗?
答案 0 :(得分:12)
正如@EricMartinez所提到的,你必须正确导入RouteParams。我正在玩我的plunker并得到完全相同的错误。
我意识到我是从'angular2/angular2'
导入的,需要从'angular2/router'
这是一个完全符合您要求但具有“汽车”组件的掠夺者。 Plunker
答案 1 :(得分:3)
注入DataService
&amp;时,我也遇到了同样的问题。 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');
}
}
希望它会对你有所帮助。
答案 2 :(得分:2)
这与您遇到的问题没有关系,但是值得一提的是,当迁移到Angular2 RC3时,您将遇到同样的问题。 Route已完全更改,因此您的Component将再次失败并抛出相同的异常。
在RC3或更高版本中,您需要重写没有名称的路线,并且您的组件需要从'@ angular / router'导入ActivatedRoute才能读取您的参数。参见:
src/tests
答案 3 :(得分:2)
如果是 angular-2.rc3 + ,您可以使用此代码段。
>>> b = struct.pack(">f", 125.4)
>>> b.decode("latin1")
<something that cannot be pasted>
post.component.ts
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();
}
}
app.routes.ts
export const routes: RouterConfig = [
{ path: 'projekte/:id', component: ProjekteComponent }
];
export const appRouterProviders = [
provideRouter(routes);
];
main.ts
希望这有帮助!