2016-03-30 5 views
2

は、私がAngular2でコンポーネントにAngular2

バージョンのURLからクエリのparamsを取得しようとしていますインデックスURLからクエリパラメータ: "angular2": "NPM:[email protected]" を、

コンポーネント内でIDクエリのparamを抽出して表示しようとしています

ここにリクエストがあります。

はlocalhost:8080/index.htmlを= 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})]); 

idは、ここで私はこのエラーを取得しておく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

私はこの解決策を別の投稿から入手しました。エラー

それがルート・コンポーネントでは使用できません

+0

私はあなたの 'RouteConfig'コードを知っていますか? –

答えて

0

RouteParamsを修正する方法がわかりません。ルーティング可能なコンポーネントでのみ使用できます。

基本的RouteParamsは、ルーティング可能なコンポーネントにRouterOutletを介して注入されている、あなたは(非ルーティング可能なコンポーネントでそれにアクセスすることはできませんそのactivate機能では、次の

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

を見ることができ、RouterOutlet soureコードを参照してください。繰り返して申し訳ありません)。

0

AppComponentの_location.path()からクエリパラメータを取得できます。あなたは自分でそれを解析する必要があります。私は同じことを探していて、もっと良い解決策を見つけられませんでした。

他の誰かがこれをフォローしてくれることを願っています。