Angular 2 错误：无法解析“RouteParams”的所有参数

Question

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

无法解析 'RouteParams'(?) 的所有参数。确保所有 参数用 Inject 修饰或具有有效类型 注释并且“RouteParams”用 Injectable 装饰。 angular2-polyfills.js:332 错误：无法读取属性“getOptional” 未定义.......

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

重要的文件是：

boot.ts:

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:

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 的建议，我添加了以下路由配置：

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

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

Answer 1

从

中删除RouteParams

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]);

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

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

Plunker example

Answer 2

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

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

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

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

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

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

Answer 3

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

@RouteConfig([
  {path: '/something/:guid', name: 'Something', component: Something}
])

Answer 4

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

还有其他获取 url 查询参数的方法吗？

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

@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 - working example of the same

更多信息请阅读awesome artical

另见-

• Router Parameter in Angular2