Home > Back-end >  How to capture route parameter when navigation from external website in Angular?
How to capture route parameter when navigation from external website in Angular?

Time:08-24

I have requirement rewrite an existing module in Angular. Ideally, there will be in link in an external website, and when user clicks on the link it opens a new window loading an application (module that need to be written in Angular).

Link could be like this : http://localhost:15210/Backlog/BacklogDetails?bckLogId=0&messageID=MSG1123&messageType=PRP

So, I need to capture the URL parameter values from URL when user clicks on an external website and once it is navigated to that angular app. I need to hold those URL parameters.

I need to capture the bckLogId, messageID, messageType parameter values when my initial component loads.

Can anyone help me how do I hold those values on Angular App initial load?

Thanks in advance

CodePudding user response:

import { Component, OnDestroy, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Subscription } from 'rxjs/Subscription';

@Component({

    selector: 'app-component',

    templateUrl: './app.component.html',

    styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit, OnDestroy {

    activatedRouteSub$: Subscription;
    constructor(private activatedRoute: ActivatedRoute) { }


    ngOnInit() {
        this.activatedRouteSub$ = this.activatedRoute.queryParams
         .subscribe(params => {
            if(params['bckLogId'] 
                     && params['messageID'] 
                     && params['messageType']){
                console.log(params['bckLogId']);
                console.log(params['messageID']);
                console.log(params['messageType']);                
            }
        });
    }
        
    ngOnDestroy() {
        if(this.activatedRouteSub$)
            this.activatedRouteSub$.unsubscribe();
    }   
}

Hope this help. Thanks!

  • Related