Since Angular 16, there is lastSuccessfulNavigation to replace the breaking change that was introduced in v15 where getCurrentNavigation might return null.

Pre v16 answer:

Since Angular 15, this.router.getCurrentNavigation() might return null, because the component is instantiated after the navigation.

The alternative is to access the state from the Location (the one from @angular/common)

  import { Location } from '@angular/common';

  constructor(private location: Location) {
    location.getState() // do what you want 
  }

change the code like this because after constructor() only the ngOnInit() gets called so the value is getting null

constructor(private router: Router) {
   this.name = this.router.getCurrentNavigation().extras.state.example;
}

Since Angular 16, there is lastSuccessfulNavigation to replace the breaking change that was introduced in v15 where getCurrentNavigation might return null.

If your path is registered with a parameter:

{path: 'somePath/:id', component: SomeComponent}

It's important to navigate to it correctly:

this.router.navigate(['/some', id], {state: {data: id}});

Incorrect would be:

this.router.navigate(['/some'+'/'+id], {state: {data: id}});

Angular does not warn you about incorrect usage and this.router.getCurrentNavigation().extras.state is not set.

This happened to me because there was a promise (asynchronous process) in the Event of the NavigationEnd, before consuming the getCurrentNavigation().extras().state of the current state.

I moved the promise after and voila! It managed to get the data without first being cleaned.

For spec (tests), the getCurrentNavigation() on constructor don´t work, you have to use the history at ngOnInit() and mock values at history, for example:

beforeEach(() => {
    window.history.pushState({name: 'MyName', id: 1}, '', '');
}

Now your component can use this values on ngOnInit() and use on spec.:

ngOnInit(): void {
    console.log(history.state.name);
}

To persist state use navigateByUrl

this.route.navigateByUrl('/your-route', { state: { id:some_id, name:'your_data' } );
<a [routerLink]="['dynamic']" [state]="{ { id:some_id, name:'your_data' }}">Dynamic Data</a>

I find the solution as follows for angular v16:

First, set the router

const routes: Routes = [
  {
    path: 'hero/:id',
    component: ChildComponent,
  },
];

When we need to obtain the ID in our component, such as when fetching a hero using its ID, we would do the following in the component:

export class ChildComponent {
  constructor(route: ActivatedRoute) {
    route.params.subscribe((params) => // do whatever you want with params.id);
  } 
}

Now we can use @Input for that. It's as simple as that.

export class ChildComponent {
  @Input() id: string;
}

Angular 17.3.0

I tried several solutions mentioned in this post, but they didn't work so far with Angular 17.3.0.

What did work, however, was to use navigateByUrl() instead of navigate().

Below is an example ...

Example

Code

Component A

Component class

export class CompAComponent {

  constructor(private router: Router) {}

  navigateToB1() {
    this.router.navigate(['/route-b', { state: { msg: 'item-1' }}])
  }

  navigateToB2() {
    this.router.navigateByUrl('/route-b', { state: { msg: 'item-2' }})
  }
}

Component template

<button (click)="navigateToB1()">Go to B (navigate)</button>
<button (click)="navigateToB2()">Go to B (navigateByUrl)</button>

Component B

Component class

export class CompBComponent implements OnInit {

  constructor(private router: Router) {
    console.log(this.router.getCurrentNavigation()?.extras)
    console.log(this.router.lastSuccessfulNavigation?.extras);
  }

  ngOnInit(): void {
    console.log(this.router.lastSuccessfulNavigation?.extras);
    console.log(this.router.getCurrentNavigation()?.extras)
  }
}

App component

  <nav>
    <a class="nav-link" routerLink="route-a" routerLinkActive="active">Comp A</a> 
    |
    <a class="nav-link" routerLink="route-b">Comp B</a>
  </nav>
  <router-outlet></router-outlet>

Running the example

Using navigate()

When clicking the button that triggers navigateToB1(), the function navigates me to CompBComponent with the following output:

// ...
constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation()?.extras)     // { "skipLocationChange": false }
  console.log(this.router.lastSuccessfulNavigation?.extras);  // { "skipLocationChange": false, replaceUrl": false }
}

ngOnInit(): void {
  console.log(this.router.lastSuccessfulNavigation?.extras);  // { "skipLocationChange": false, "replaceUrl": false }
  console.log(this.router.getCurrentNavigation()?.extras)     // undefined
}
// ...

Using navigateByUrl()

When clicking the button that triggers navigateToBB(), the function navigates me to CompBComponent with the following output:

// ...
constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation()?.extras)     // { "state": { "msg": "item-2" } }
  console.log(this.router.lastSuccessfulNavigation?.extras);  // { "skipLocationChange": false, "replaceUrl": false }
}

ngOnInit(): void {
  console.log(this.router.lastSuccessfulNavigation?.extras);  // { "state": { "msg": "item-2" } }
  console.log(this.router.getCurrentNavigation()?.extras)     // undefined
}
// ...

Conclusion

Using navigate() didn't pass the state in all of the examples, but for some reason navigateByUrl() did.

Am I missing something here? Afaik, navigate() is just a wrapper around navigateByUrl(). Maybe it has something to do with how navigateByUrl() changes the location bar:

How to use router.navigateByUrl and router.navigate in Angular