CODEWITHSUNDEEP
angularangular2-routingangular-router
Rihab
Rihab

Reputation: 67

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 }

Upvotes: 1

Views: 28

Answers (0)

Related Questions