Angular - RouteParams

Posted 2023-02-22

【中文标题】Angular - RouteParams

【英文标题】：

【发布时间】：2016-02-07 22:41:22

【问题描述】：

我目前正在测试 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 类似于 Angular 文档中的示例。 <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

你有什么建议吗？

【问题讨论】：

也许是一个显而易见的问题，但您是否导入了 RouteParams？

是的，我已经导入了 RouteParams。它变得更加好奇。在我同事的电脑上，它运行良好。因此，我在笔记本电脑上对其进行了测试，但甚至出现了同样的问题。代码与我们的 Git-Repo 相同。所以也许我们得到了不同的打字稿编译器版本，这可能是导致这种情况的原因。但这听起来真的很奇怪。

【参考方案1】：

我在注入我的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');
    

希望对你有所帮助。

【参考方案2】：

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

我意识到我正在从 'angular2/angular2' 导入，需要从 'angular2/router' 导入

这是一个 plunker，它完全符合您的要求，但带有“汽车”组件。 Plunker

【参考方案3】：

这与您遇到的问题无关，但值得一提的是，当您迁移到更高版本的 Angular2 RC3 时，您将面临同样的问题。 Route 已完全更改，因此您的 Component 将再次失败并抛出相同的异常。

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

constructor(private activatedRoute: ActivatedRoute) 

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

【参考方案4】：

如果是angular-2.rc3+，可以使用这个sn-p。

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

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

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

bootstrap(AppComponent, [
    appRouterProviders
]);

希望对您有所帮助！

【讨论】：

我很好奇 unsubscribe 中的 onDestroy 是否是强制性的，或者最新版本的 Angular 是否会为我们处理？