Tengo un componente principal que tiene una salida de enrutador. En el componente que se carga en la salida del enrutador, tomo el parámetro de URL de esta manera:
ngOnInit(): void { // _route is injected ActivatedRoute this._route.params.subscribe((params: Params) => { if(params['url']){ this.testUrl = params['url'].replace(new RegExp('\%2[fF]', 'g'), '/'); } }); }Esto funciona bien, pero cuando lo pruebo en mi componente de nivel superior, el objeto params siempre está vacío. No entiendo por qué, ya que el objeto param de componentes anidados tiene los datos y estoy tratando de acceder a ellos exactamente de la misma manera. No hay errores para continuar, el objeto param simplemente está vacío.
¿Por qué mi componente principal no obtiene el objeto Params correcto de ActivatedRoute?
editar:
según lo solicitado componente principal completo
import { OnInit, Component, Directive } from '@angular/core'; import { Router, ActivatedRoute, Params } from '@angular/router'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', }) export class AppComponent { public testUrl: string; constructor(private router: Router, private _route: ActivatedRoute) { } ngOnInit(): void{ this._route.queryParams.subscribe((params: Params) => { console.log(params); if (params['url']) { this.testUrl = params['url'].replace(new RegExp('\%2[fF]', 'g'), '/'); alert(params['url']); } }); } }código de enrutador para app.module.ts:
RouterModule.forRoot([ { path: '', component: CheckMobileComponent }, { path: '**', component: CheckMobileComponent } ]),código de enrutador para el módulo anidado:
RouterModule.forChild([ { path: 'report', component: MobileReportComponent }No hay una ruta especificada directamente para mi app.component, ya que un selector lo carga en index.html.
ActivatedRoute : contiene la información sobre una ruta asociada con un componente cargado en una salida del enrutador. Si desea acceder a los detalles de la ruta fuera de ella, use el código a continuación.
import { Component } from '@angular/core'; import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router'; export class AppComponent { constructor(private route: ActivatedRoute, private router: Router) { } ngOnInit(): void { this.router.events.subscribe(val => { if (val instanceof RoutesRecognized) { console.log(val.state.root.firstChild.params); } }); } }Hay otras formas de compartir datos entre componentes, por ejemplo , mediante el uso de un servicio .
Para obtener más detalles sobre cómo puede abordar este concepto, lea los comentarios aquí .
La respuesta muy simple
import { Component } from '@angular/core'; import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router'; export class AppComponent { constructor(private actRoute: ActivatedRoute, private router: Router){} ngOnInit(): void { this.actRoute.firstChild.params.subscribe( (params: any) => { if (params.hasOwnProperty('<whatever the param name>') != '') { //do whatever you want console.log(params.<whatever the param name>); } }); } }Si desea acceder a los parámetros del enrutador a través de un servicio, ¡este enfoque no funcionará! considere usar un servicio para evitar la replicación de la "lógica de extracción de valor de parámetros de ruta" (de este artículo de Medium ):
@Injectable({ providedIn: 'root' }) export class MyParamsAwareService { constructor(private router: Router) { this.router.events .pipe( filter(e => (e instanceof ActivationEnd) && (Object.keys(e.snapshot.params).length > 0)), map(e => e instanceof ActivationEnd ? e.snapshot.params : {}) ) .subscribe(params => { console.log(params); // Do whatever you want here!!!! }); } }