how to pass state in default route Angular

i'm facing an issue passing router state to the default child route("general"),

the state is set only when i click on the tab,

FunctionalLocationDetailsComponent is parent component,

FunctionalLocationDetailsGeneralComponent is default child component

here is my code.

routes :

const routes: Routes = [
{
path: ':flId',
component: FunctionalLocationDetailsComponent,
children: [
{ path: '', redirectTo: 'general', pathMatch: 'full' },
{
path: 'general',
component: FunctionalLocationDetailsGeneralComponent,
},
{
path: 'measuring-points',
component: FunctionalLocationDetailsMeasuringPointsComponent,
},
{
path: 'maintenance',
component: FunctionalLocationDetailsMaintenanceComponent,
},
]}];


my parent component :

@Input() flId!: number;
public flDetails? :FunctionalLocationDetails;
constructor(
private readonly flService: FunctionalLocationService) {}

ngOnInit(): void {
this.flService.getFunctionalLocationById(this.flId).subscribe({
next: (flDetails: FunctionalLocationDetails) => {
this.flDetails = flDetails;
},
});}


parent html :

<div class="container-fluid m-3" *ngIf="flDetails">
<ul class="nav nav-tabs d-flex ms-auto flex-row m-4">
<li class="nav-item">
<button class="nav-link" type="button" [routerLink]="['general']"
[routerLinkActive]="['active']" [state]="{ example: flDetails }">General</button>
</li>
<li class="nav-item">
<button class="nav-link" type="button" [routerLink]="['measuring-points']" [routerLinkActive]="['active']" [state]="{ example: flDetails }">
Measuring points
</button>
</li>
<li class="nav-item">
<button class="nav-link" type="button" [routerLink]="['maintenance']" [routerLinkActive]="['active']" [state]="{ example: flDetails }">
Maintenance
</button>
</li> </ul></div>


and FunctionalLocationDetailsGeneralComponent child :

constructor(
private router: Router ,
private location: Location) {
const name = this.router.lastSuccessfulNavigation?.extras?.state?.['example']; // return undefined
console.log(name)
console.log(this.location.getState()); // return only navigationId }

Continue reading...