关于路由：Angular 2 错误：无法解析”RouteParams”的所有参数


Angular 2 error: Cannot resolve all parameters for 'RouteParams'

尝试使用 RouteParams 获取查询字符串参数，但我只是得到错误

Cannot resolve all parameters for 'RouteParams'(?). Make sure that all
the parameters are decorated with Inject or have valid type
annotations and that 'RouteParams' is decorated with Injectable.
angular2-polyfills.js:332 Error: Cannot read property 'getOptional' of
undefined.......

看看这个 Plnkr。如何在不收到此警告的情况下使用 RouteParams？

重要的文件是：

boot.ts:

1
2
3
4
5
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, RouteParams} from 'angular2/router';
import {AppComponent} from './app/app.component';

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]);

和 app.component.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {Component, OnInit} from 'angular2/core';
import {RouteParams} from"angular2/router";

@Component({
  selector: 'app',
  template: `
    <p *ngIf="guid">guid gived is: {{guid}}</p>
    <p *ngIf="!guid">No guid given in query-string in URL</p>
  `
})
export class AppComponent implements OnInit {
  guid:string;

  constructor(private _params: RouteParams) {} //

  ngOnInit() {
    this.guid = this._params.get('guid');
  }

}

更新：

我没有任何路由，我只有默认的根路由(如果在我没有其他路由时可以将其称为路由...)。但正如 Gianluca 所建议的，我添加了以下路由配置：

1
2
3
@RouteConfig([
  { path: '/:guid', name: 'Home', component: AppComponent, useAsDefault: true },
])

但我仍然遇到同样的错误(Plnkr 已更新)...

相关讨论

从

中移除RouteParams

1
bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]);

RouteParams 由路由器提供。如果您自己提供它，则注入它会失败。

有关示例，请参见 https://angular.io/api/router/Params。 RouteParams 只能注入到路由器添加的组件上。

Plunker 示例

相关讨论

在看到 G??nter 的正确且被接受的答案后，我想添加一个自己的答案(我问了原来的问题)。

这对我的情况来说真的是大材小用：我没有路由(我只有一个单页单页应用程序)，所以我必须：

  • 引入另一个"外部"组件(RouteConfig)
  • 使用路由器配置和路由器基本模板(使用 <router-outlet></router-outlet>)创建一个专用组件
  • 在我要使用查询字符串参数的组件中注入 RouteParams

然后终于可以查询字符串参数了...

在我的例子中(只有一个参数)，我只是做了这个单行(分布在 4 行以便于阅读)：

1
2
3
4
this.myParameter = window.location.href
  .slice(window.location.href.indexOf('?') + 1)
  .split('&')[0]
  .split('=')[1];

我没有正确理解你的问题，但是正如你在评论中所说的那样

Is there another way of getting the url query params?

我们可以通过使用 data 属性发送
我们可以使用 angualr2 提供的 @RouteConfig annotation 的 data 属性通过路由发送数据。通过使用此属性，我们可以在路由配置时向组件发送附加数据，而无需在 URL 中显示。这是此属性的示例。

1
2
3
4
5
6
7
8
9
10
11
12
@RouteConfig([
    {path: '/product/:id', component: ProductDetailComponentParam,
     as: 'ProductDetail', data: {isProd: true}}])

export class ProductDetailComponentParam {
    productID: string;
    constructor(params: RouteParams, data: RouteData) {
        this.productID = params.get('id');

        console.log('Is this prod environment', data.get('isProd'));
    }
}

通过使用它，我们可以通过路由发送数据而不显示在 URL 中。
Plunker - 相同的工作示例

更多信息请阅读这篇精彩的文章

另见 -

  • Angular2中的路由器参数
相关讨论

您是否在@RouteConfig 中指定了guid？

1
2
3
@RouteConfig([
  {path: '/something/:guid', name: 'Something', component: Something}
])
相关讨论