Я пытаюсь перейти с 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)
];
Когда я нажимаю на ссылку 'New', консоль выводит пустой объект
Объект {}
Обновлено
обновление (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']));
оригинал
Если вам нужны 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']));
Я долгое время боролся с той же проблемой. Ответ непростой, в документации было указано:
ActivatedRoute: Служба, предоставляемая каждому маршруту. компонент, который содержит специфическую для маршрута информацию, такую как параметры маршрута, статические данные, данные разрешения, глобальные параметры запроса и глобальный фрагмент. Это упоминается в здесь
Ответ с подвохом - 'route component', то есть 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:
Удачи, надеюсь, код будет наглядным.
проверьте документацию по angular, там все есть: 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);
});