Search code examples
angulartypescriptangular-router

Angular routes with params and getting params


A user will be clicking a link in an email like this:

do-something/doSomething?thing=XXXXXXXXXXX

How can I define the route in the router and subscribe to get params?

Currently in router I have:

    {
     path: 'do-something/:id',
     component: DoSomethingComponent
    },

In the component:

    ngOnInit() {
     this.sub = this.route
      .params
      .subscribe(params => {
       console.log(params)
      });
    }

However, the route never matches. Shouldn't ":id" consider anything after reset-password as a param?


Solution

  • this one i got for angular site

    import { Component, OnInit }  from '@angular/core';
    import { ActivatedRoute }     from '@angular/router';
    import { Observable }         from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    
    @Component({
      template:  `
        <p>Dashboard</p>
        <p>Session ID: {{ sessionId | async }}</p>
      `
    })
    export class AdminDashboardComponent implements OnInit {
    
      constructor(private route: ActivatedRoute) {}
    
      ngOnInit() {
       //read query param
        this.route
          .queryParamMap
          .map(params => console.log(params.get('thing')););
    
         //read param value 
          this.route
          .paramMap
          .map((params: ParamMap) => 
                               console.log(params.get('id')));
      }
    }
    

    Read Routinh here : https://angular.io/guide/router#!#optional-route-parameters


    try like this

    const appRoutes: Routes = [
      { path: 'do-something/:id', component: DoSomethingComponent, name: 'Details'}];
    

    now navigation like

    this.router.navigate( [
      'Details', { id: 'idvalue', param1: 'value1'
    }]);//this you can try from code
    

    this match

    do-something/idvalue?param1=value1. //this try from browser
    

    read query param like this

    ngOnInit() {
      // Capture the access token and code
      this.route
          .queryParams
          .subscribe(params => {
              let thing = params['thing'];
          });
    }
    

    or try this

    (new URL(location)).searchParams.get("parameter_name")