Получить параметры запроса маршрута

Я пытаюсь перейти с 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 {
}

обертоны / 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)
];

Когда я нажимаю на ссылку «New», консоль выводит пустой объект

Объект {}

обновленный

plunker

Ответы на вопрос(3)

Решение Вопроса

обновление (2.0.0 финал)

(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']));

оригинал

Если ты хочешьqueryParams вместо параметров маршрута (somepath/:someparam/someotherpath) вы можете подписаться на них, используя_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']));

Пример плунжера

 huan feng07 дек. 2018 г., 04:18
@ GünterZöchbauer Вы решили исходную проблему с параметрами?
 izupet28 июл. 2016 г., 08:55
Мой пример с плунжером уже показывает это. Проверьтеplnkr.co/edit/s5tYzWmbOXZRiRdunF4N?p=preview и откройте консоль и посмотрите вывод.
 Günter Zöchbauer28 июл. 2016 г., 08:58
Но нет никаких параметров при начальной загрузке. Твой плункер не используетparams совсем.New ссылка используетqueryParams но это передается только после нажатия на ссылку.
 izupet25 июл. 2016 г., 18:03
Мне нравится ваш ответ, и он работает, как и ожидалось, но вы, возможно, знаете, почему я получил пустой объект ActivatedRoute в моем примере с plunker? Просто любопытно.
 Carlo Roosen19 дек. 2016 г., 13:18
Кажется, что RouterState больше не имеет свойства queryParamsangular.io/docs/ts/latest/api/router/index/...
 izupet28 июл. 2016 г., 08:46
Сам ActivatedRoute должен содержать параметры запроса об активированном компоненте, но я получаю пустой объект, когда подписываюсь. Не знаю, как лучше уточнить.
 Günter Zöchbauer19 дек. 2016 г., 13:22
Спасибо @CarloRoosen._activatedRoute.queryParams.subscribe или же_activatedRoute.snaphsot.queryParams предоставлятьqueryParams сейчас.
 Günter Zöchbauer28 июл. 2016 г., 07:42
Я не понимаю ваш вопрос. Что вы имеете в виду под "пустым"?ActivatedRoute передается, в противном случае.params.subscribe() бросил бы.
 Günter Zöchbauer28 июл. 2016 г., 08:49
Можете ли вы опубликовать обновленный Plunker сconsole.log(...) что печатает пустой объект, о котором вы говорите?
 Günter Zöchbauer25 июл. 2016 г., 19:45
Я посмотрю позже, пинг меня, если я забуду. Мой список задач быстро растет ...

ый, в документации было указано:

ActivatedRoute: Сервис, который предоставляется каждомумаршрут Компонент, который содержит информацию о маршруте, такую ​​как параметры маршрута, статические данные, данные разрешения, глобальные параметры запроса и глобальный фрагмент. Это упоминается вВот

Ответ хитрости«компонент маршрута»это означает, что ActivatedRoute будет работать только на маршрутизируемых компонентах. Другими словами, только компоненты, описанные в таблице маршрутизации.

> Чтение запутанной официальной документацииВот, В нем упоминается «маршрут, связанный с компонентом, загруженным в розетку». Мы можем только догадываться, что такое выход ...

Я написал небольшой следственный код для исследования этой проблемы в отдельном 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:

HTTP: // локальный: 4200/2HTTP: // локальный: 4200/1HTTP: // локальный: 4200 / а / б / с

Удачи, надеюсь, код является демонстративным.

проверьте угловую документацию, ее все есть: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);
       });
 Avi20 июл. 2016 г., 21:26
Тогда попробуйте новый способ. Вы действительно должны прочитать этот раздел на документах.
 izupet20 июл. 2016 г., 21:28
Сделал, но ничего не работает ...
 izupet20 июл. 2016 г., 21:40
есть это ... похоже, что ActivatedRoute не заполняется данными маршрута ...
 Avi20 июл. 2016 г., 21:49
Вы явно что-то упускаете. пожалуйста, опубликуйте весь соответствующий код или закончите этот урок. Уверяю вас, это отлично работает для меня.
 Avi20 июл. 2016 г., 23:00
 Avi20 июл. 2016 г., 21:20
это как вы передаете параметр? onSelect (герой: герой) {this.router.navigate (['/ hero', hero.id]); }
 izupet20 июл. 2016 г., 21:17
Я пробовал это раньше, но получая неопределенный при попытке получить параметр строки запроса. params на самом деле пустой объект.
 Avi20 июл. 2016 г., 21:31
может, это ваша недостающая часть, проверьте параметр id в маршруте героя: export const heroesRoutes: RouterConfig = [{путь: 'heroes', компонент: HeroListComponent}, {путь: 'hero /: id', компонент: HeroDetailComponent}] ;
 izupet20 июл. 2016 г., 21:24
таким образом [routerLink] = "['/']" [queryParams] = "{st: 'rec'}" Я хочу получить st param

Ваш ответ на вопрос