How to allow routing to localhost:4200/overview? Partid=10

Question

User696604810 posted

Hi i make local web app with angular 7
I need when write on URL

localhost:4200/overview?partid=10
routing to component overview
my Question how to make routing to be as above
so can you please help me

app-routing.module.ts

import { QualificationsComponent } from './Pages/qualifications/qualifications.component';
import { FamilyComponent } from './Pages/family/family.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OverviewComponent } from './Pages/overview/overview.component';
import { ManufacturingComponent } from './Pages/manufacturing/manufacturing.component';
import { PackageComponent } from './Pages/package/package.component';
import { ParametricComponent } from './Pages/parametric/parametric.component';

const routes: Routes = [
  { path: '', component: OverviewComponent },
  { path: 'overview', component: OverviewComponent },
  { path: 'family', component: FamilyComponent },
  {path:'manufacturing',component:ManufacturingComponent},
  {path:'package',component:PackageComponent},
  {path:'parametric',component:ParametricComponent},
  {path:'qualifications',component:QualificationsComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }



import { CompanyService } from './../../service/company.service';
import { Component, OnInit } from '@angular/core';
import { PartDetailsService } from 'src/app/service/part-details.service';
 


@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.css']
})
export class OverviewComponent implements OnInit {

  
  public companyProfile;
  constructor(public partDetailsService: PartDetailsService
    ,         public companyService: CompanyService) {
    
   }

  ngOnInit() {
     //How to catch or rcognize Partid=10 here on component overview 
  }

so please can you help me to write routing to be as URL in title ?

Answer 1

User303363814 posted

Inject the ActivatedRoute into the overview component constructor then get the queryParams in ngOnInit.  Something like

import { ActivatedRoute, Params } from '@angular/router';
.
.
.

constructor(
   private route: ActivatedRoute,
.
.

ngOnInit() {
   this.route
       .queryParams
       .subscribe((params: Params) => {
              // params['Partid'] is the parameter value

Answer 2

User696604810 posted

thank you for reply

and what i write on app-routing.module.ts 

Answer 3

User696604810 posted

I need url as 

localhost:4200/overview?partid=10 or any number 

please can you help me to make that format please 

where ? after overview 

and where = equal after partied

can you please help me if possible

Answer 4

User303363814 posted

Have you tried the code I showed you?  If it is not giving the result you want can you show us how you have changed your code?