If you want to achieve this functionality, you can utilize the built-in ActivatedRoute service in Angular. This service acts as your primary source for route information, as mentioned in the official documentation.
To begin, make sure to inject the ActivatedRoute service into your component's constructor. Whether it's a Todo or Birthday component, your constructor should include:
constructor(private currentRoute: ActivatedRoute, private router: Router) { }
Next, within the ngOnInit() function of your component, subscribe to the url property of the ActivatedRoute instance, which returns an Observable:
ngOnInit() {
this.currentRoute.url
.subscribe(routeParts => {
this.parameterArray = [];
for (let i = 1; i < routeParts.length; i++) {
this.parameterArray.push(routeParts[i].path);
}
});
}
The reason for using an Observable is that your component may receive various routes during its lifecycle. By subscribing to ActivatedRoute.url, you ensure that you are always aware of the current route.
The code provided above populates an array with all passed parameters after the initial segment ("/todo" or "/birthday") from the activated route.
You can easily navigate to another component by adding the necessary path at the beginning of the parameter array like so:
navigateToOtherComponent() {
this.parameterArray.unshift('/othercomponent');
this.router.navigate(this.parameterArray);
}
For reference, below is the complete code for the Todo component along with its template:
todo.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
templateUrl: './todo.component.html',
})
export class TodoComponent implements OnInit {
parameterArray = [];
constructor(private currentRoute: ActivatedRoute, private router: Router) { }
ngOnInit() {
this.currentRoute.url
.subscribe(routeParts => {
this.parameterArray = [];
for (let i = 1; i < routeParts.length; i++) {
this.parameterArray.push(routeParts[i].path);
}
});
}
navigateToOtherComponent() {
this.parameterArray.unshift('/othercomponent');
this.router.navigate(this.parameterArray);
}
}
todo.component.html
<p>
List of Todo items for {{parameterArray.join("-")}}
</p>
<button (click)="navigateToOtherComponent()">Go To Other Component</button>
The Birthday component would follow a similar structure. With this approach, you can seamlessly switch between different routes without defining explicit routing rules.
On a related note, when dealing with optional parameters, it's often recommended to handle them separately from the URL path, utilizing optional route objects instead - as elaborated in this section of the documentation.