来自索引 URL 的 Angular2 查询参数

Question

我正在尝试从 Angular2

的组件中的 url 获取查询参数

版本："angular2"："npm:angular2@2.0.0-beta.12"，

我正在尝试提取组件中的 id 查询参数并显示它

这是请求。

localhost:8080/index.html?id=1

boot.ts

import 'reflect-metadata';
import 'angular2/bundles/angular2-polyfills';
import { bootstrap } from 'angular2/platform/browser';
import { provide} from 'angular2/core';
import { AppComponent } from './app.component';
import {ROUTER_PROVIDERS, Location, LocationStrategy,     HashLocationStrategy} from "angular2/router";
import {HTTP_PROVIDERS} from "angular2/http";

bootstrap(AppComponent , [ROUTER_PROVIDERS, HTTP_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

这里是app.component.ts

import { Component } from 'angular2/core';
 import {Router, Location, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams} from 'angular2/router';

@Component({
    selector: 'my-app',
    template: '{{welcome}} {{queryParam}}',
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
    welcome: string = 'Query Param test!'
    queryParam : string;

    constructor(private _location: Location, private _routeParams:     RouteParams){
        console.log(_routeParams.get('id'));
        this.queryParam = _routeParams.get('id');
    }

}

我不断收到此错误：

error message

我从另一个 post 那里得到了这个解决方案。不确定如何修复错误

一个

Answer 1

RouteParams 它在根组件中不可用。它仅适用于可路由组件。

见RouterOutlet soure code, in its activate函数，可以看到如下

var providers = Injector.resolve([
  provide(RouteData, {useValue: nextInstruction.routeData}),
  provide(RouteParams, {useValue: new RouteParams(nextInstruction.params)}),
  provide(routerMod.Router, {useValue: childRouter})
]);

基本上 RouteParams 是通过 RouterOutlet 注入到可路由组件中的，您不能在不可路由组件中访问它（很抱歉我重复了一遍）。

Answer 2

您可以从 AppComponent 中的 _location.path() 获取查询参数。你必须自己解析它们。我也在寻找同样的东西，但没有找到更好的解决方案。

我希望有人跟进此事。

来自索引 URL 的 Angular2 查询参数

Angular2 Query Parameter from index URL

angular2-routing

routeparams

angular