Is it possible to obtain the URL (including parameters) of the first navigation before proceeding with the navigation process?

Question

Is it possible to obtain the URL (including parameters) of the first navigation before proceeding with the navigation process?

My goal is to automatically navigate to a specific website when a certain condition for the URL is met.

Consider the following scenario in the ngOnInit() method of app.component.ts:

if (urlMatchesCondition()) {
    await this.router.navigateByUrl('special-site');
} else {
    await this.router.initialNavigation();
}

When logging the ActivatedRoute (

await this.route.url.pipe(take(1)).toPromise()

) and Router (this.router.url), an empty route or "/" respectively is displayed.

For instance, if I wanted to check if the route contains "test", how could I achieve that?

angular typescript

Answer 1

Answer №1

When working with the ActivatedRoute, you can easily access all parameters using queryParamMap or the path, depending on what you need to check for.

If you're only interested in the current value, you can retrieve it using .snapshot instead of an Observable.

Furthermore, your scenario seems more suited for what Angular refers to as a "guard," which allows for pre-loading component checks and potential redirection based on specific conditions.

Answer 2

When working with the ActivatedRoute, you can easily access all parameters using queryParamMap or the path, depending on what you need to check for.

If you're only interested in the current value, you can retrieve it using .snapshot instead of an Observable.

Furthermore, your scenario seems more suited for what Angular refers to as a "guard," which allows for pre-loading component checks and potential redirection based on specific conditions.

Is it possible to obtain the URL (including parameters) of the first navigation before proceeding with the navigation process?

Answer №1

Similar questions

What is the best way to incorporate a WYSIWYG Text Area into a TypeScript/Angular2/Bootstrap project?

Obtain an instance tuple from tuple classes using TypeScript 3.0 generic rest tuples type

What causes the presence of undefined elements within the ngOnInit function of Angular?

Tips for incorporating asynchronous page components as a child element in next.js?

UI-Router - issue with query parameters preventing arrays with only one item

Testing the receiveMessage function in SQS using Jest unit tests

What does the "xxx" parameter represent in the ng g universal xxx command when using AngularCLI 6+?

Retrieve the 90 days leading up to the current date using JavaScript

Concerns with combining key value pairs in Typescript Enums

In my attempt to assess the correlation between value 1 and a value in the preceding object, I am utilizing the *ngFor directive

Angular consistently marks form controls as mandatory, even in the absence of validators

Identifying changes in a property's value binding within Angular 4

Apollo-Server presents errors in a polished manner

You cannot assign type void to type any

What is the best approach to handling an undefined quantity of input FormControls within Angular?

Script - Retrieve the content of the code element

Angular 2 - Unable to access the AssetUrl property due to undefined value

The issue I encountered with Angular's Mat-Select component is that the openedChange

Utilizing a personalized component with a mat-autocomplete feature within reactive forms by nesting

Multiple WAR files are nestled within an EAR file, facilitating the sharing of classes