web-dev-qa-db-ja.com

ルートクエリパラメーターを取得する

Rc1からrc4に移行しようとしていますが、クエリ文字列パラメーターを取得できません。 ActivatedRouteオブジェクトは常に空です。

hero.component.ts

import {Component, OnInit} from "@angular/core";
import {Control} from "@angular/common";
import {ROUTER_DIRECTIVES, ActivatedRoute} from '@angular/router';

@Component({
    template: '../partials/main.html',
    directives: [ROUTER_DIRECTIVES]
})

export class HeroComponent implements OnInit {

    constructor(private _activatedRoute: activatedRoute) {

    }

    ngOnInit() {
        this._activatedRoute.params.subscribe(params => {
            console.log(params);
        });
    }
}

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS, RequestOptions, Http} from '@angular/http';
import {AppRouterProviders} from './app.routes';

bootstrap(AppComponent, [
    AppRouterProviders,
    HTTP_PROVIDERS
]);

app.component.ts

import {Component, OnInit} from '@angular/core';
import {HeroComponent} from './hero.component';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from '@angular/router';


@Component({
    selector: 'my-app',
    templateUrl: '../partials/main.html',
    directives: [
        HeroComponent,
        ROUTER_DIRECTIVES
    ]
})

export class AppComponent {
}

partials/main.html

<a class="nav-link" [routerLink]="['/']" [queryParams]="{st: 'new'}">New</a>

app.routes.ts

import {provideRouter, RouterConfig}  from '@angular/router';
import {HeroComponent} from './hero.component';
import {ErrorComponent} from './error.component';

const routes: RouterConfig = [
    {path:'', component: HeroComponent},
    {path:'**', component: ErrorComponent}
];

export const AppRouterProviders = [
    provideRouter(routes)
];

リンクをクリックすると、「新規」コンソールが空のオブジェクトを出力します

オブジェクト{}

更新済み

plunker

typescriptangularobservableangular2-routing
13
izupet

update（2.0.0 final）

（_somepath/:someparam/someotherpath_）_router.queryParams.subscribe(...)を使用してサブスクライブできます：

_export class HeroComponent implements OnInit {
  constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
    _activatedRoute.queryParams.subscribe(
      params => console.log('queryParams', params['st']));
_

オリジナル

ルートパラメータ（_somepath/:someparam/someotherpath_）の代わりにqueryParamsが必要な場合は、_router.routerState.queryParams.subscribe(...)を使用してサブスクライブできます。

_export class HeroComponent implements OnInit {
  constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
    _router.routerState.queryParams.subscribe(
      params => console.log('queryParams', params['st']));
_

プランカーの例

29
Günter Zöchbauer

私は同じ問題に長い間苦労していました。答えはトリッキーで、ドキュメントには次のように記載されています。

ActivatedRoute：ルートなどのルート固有の情報を含む各routeコンポーネントに提供されるサービスパラメーター、静的データ、解決データ、グローバルクエリパラメーター、グローバルフラグメント。これは here で言及されています

秘answerは 'route component'です。つまり、ActivatedRouteはルーティングされるコンポーネントでのみ機能します。言い換えると、ルーティングテーブルに記述されているコンポーネントのみです。

>難読化された公式ドキュメントを読む here 。 「コンセントにロードされたコンポーネントに関連付けられたルート」に言及しています。アウトレットとは何かを推測することしかできません...

スタンドアロンapp.module.tsでこの問題を調査するための調査コードを少し書きました。

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'comp1',
  template: `<h4>comp1 works</h4>`,
})
export class Comp1 { }

@Component({
  selector: 'comp2',
  template: `<h4>comp2 works</h4>`,
})
export class Comp2 { }

@Component({
  selector: 'fail',
  template: `<div>Wrong URL:{{url | json}}</div> <h4>Failure page works</h4>`,
})
export class Fail {
  private url: any;
  constructor(public activeRoute: ActivatedRoute) {
    this.url = activeRoute.snapshot.url
  };

}

@Component({
  selector: 'app-root',
  template: `<div>Base URL:{{url | json}}</div> <router-outlet></router-outlet>`,
})
export class App {
  private url: any;
  constructor(public activeRoute: ActivatedRoute) {
    this.url = activeRoute.snapshot.url
  };
}

const appRoutes: Routes = [
  { path: '1', component: Comp1 },
  { path: '2', component: Comp2 },
  { path: '**', component: Fail }
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(appRoutes)],
  declarations: [App, Comp2, Comp1, Fail],
  bootstrap: [App]
})
export class AppModule { }

次のURIのモジュールを実行してみてください。

幸運を祈ります。コードが実例を示すことを願っています。

3
Dudi Boy

check angular documentation、its all there： https://angular.io/docs/ts/latest/guide/router.html

constructor(
  private route: ActivatedRoute,
  private router: Router,
  private service: HeroService) {}

    ngOnInit() {
      this.sub = this.route.params.subscribe(params => {
         let id = +params['id']; // (+) converts string 'id' to a number
         this.service.getHero(id).then(hero => this.hero = hero);
       });
0
Avi