Saya mencoba untuk bermigrasi dari rc1 ke rc4 dan saya mengalami masalah dalam mendapatkan parameter string query. Objek ActivatedRoute selalu kosong.
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)
];
Ketika saya mengklik tautan 'New' konsol mencetak objek kosong
Objek {}
Diperbarui
pembaruan (2.0.0 final)
(somepath/:someparam/someotherpath
) Anda dapat berlangganan ke mereka menggunakan _router.queryParams.subscribe(...)
:
export class HeroComponent implements OnInit {
constructor(private _activatedRoute: ActivatedRoute, private _router:Router) {
_activatedRoute.queryParams.subscribe(
params => console.log('queryParams', params['st']));
asli
Jika Anda menginginkan queryParams
bukannya params rute (somepath/:someparam/someotherpath
) Anda dapat berlangganan ke mereka menggunakan _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']));
Saya berjuang dengan masalah yang sama untuk waktu yang lama. Jawabannya rumit, dalam dokumentasi dinyatakan:
ActivatedRoute: Sebuah layanan yang disediakan untuk setiap komponen route yang berisi informasi spesifik rute seperti parameter rute, data statis, data resolve, param kueri global, dan fragmen global. Hal ini disebutkan dalam di sini
Trik jawabannya adalah 'route component', itu berarti ActivatedRoute hanya akan bekerja pada komponen yang di-route. Dengan kata lain hanya komponen yang dijelaskan dalam tabel routing.
Membaca dokumentasi resmi yang mengaburkan disini. Disebutkan 'route yang terkait dengan komponen yang dimuat dalam sebuah outlet'. Kita hanya bisa menebak apa itu outlet...
Saya menulis sedikit kode investigasi untuk meneliti masalah ini di app.module.ts yang berdiri sendiri:
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 { }
Coba jalankan modul untuk URI berikut:
Semoga berhasil, semoga kodenya demonstratif.
periksa dokumentasi angular, semuanya ada di sana: 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);
});