Angular – Parent components gets empty Params from ActivatedRoute

angulartypescript

I have a main component that has a router-outlet in it. In the component that is loaded in the router-outlet I grab the url parameter like this:

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'), '/');

        }

    });
}

This works fine, but when I try it on my top level component the params object is always empty. I don't understand why as the nested components param object has the data in it and I am trying to access it exactly the same way. There are no errors to go on, the param object is just empty.

Why doesn't my parent component get the right Params object from ActivatedRoute?

edit:

as requested full parent component

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

}

router code for app.module.ts:

RouterModule.forRoot([
  { path: '', component: CheckMobileComponent },
  { path: '**', component: CheckMobileComponent }
]),

router code for nested module:

RouterModule.forChild([
 { path: 'report', component: MobileReportComponent }

There is no directly specified route for my app.component as it is loaded by a selector in index.html.

Best Answer

ActivatedRoute: Contains the information about a route associated with a component loaded in an router outlet. If you would like to access route details outside of it, use the code below. 

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);

            }
        });

    }
}

There are other ways to share data in between components for example by using a service.

For more details about how you can tackle this as concept, read comments here.

Related Topic