ahmed elbarbary

ahmed elbarbary

  • 643
  • 1.6k
  • 282.5k

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

Dec 18 2019 4:21 PM

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
  1. app-routing.module.ts  
  2.   
  3. import { QualificationsComponent } from './Pages/qualifications/qualifications.component';  
  4. import { FamilyComponent } from './Pages/family/family.component';  
  5. import { NgModule } from '@angular/core';  
  6. import { Routes, RouterModule } from '@angular/router';  
  7. import { OverviewComponent } from './Pages/overview/overview.component';  
  8. import { ManufacturingComponent } from './Pages/manufacturing/manufacturing.component';  
  9. import { PackageComponent } from './Pages/package/package.component';  
  10. import { ParametricComponent } from './Pages/parametric/parametric.component';  
  11.   
  12. const routes: Routes = [  
  13.   { path: '', component: OverviewComponent },  
  14.   { path: 'overview', component: OverviewComponent },  
  15.   { path: 'family', component: FamilyComponent },  
  16.   {path:'manufacturing',component:ManufacturingComponent},  
  17.   {path:'package',component:PackageComponent},  
  18.   {path:'parametric',component:ParametricComponent},  
  19.   {path:'qualifications',component:QualificationsComponent},  
  20. ];  
  21.   
  22. @NgModule({  
  23.   imports: [RouterModule.forRoot(routes)],  
  24.   exports: [RouterModule]  
  25. })  
  26. export class AppRoutingModule { }  
  27.   
  28.   
  29.  overview.component.ts

  30. import { CompanyService } from './../../service/company.service';  
  31. import { Component, OnInit } from '@angular/core';  
  32. import { PartDetailsService } from 'src/app/service/part-details.service';  
  33.    
  34.   
  35.   
  36. @Component({  
  37.   selector: 'app-overview',  
  38.   templateUrl: './overview.component.html',  
  39.   styleUrls: ['./overview.component.css']  
  40. })  
  41. export class OverviewComponent implements OnInit {  
  42.   
  43.     
  44.   public companyProfile;  
  45.   constructor(public partDetailsService: PartDetailsService  
  46.     ,         public companyService: CompanyService) {  
  47.       
  48.    }  
  49.   
  50.   ngOnInit() {  
  51.      //How to catch or rcognize Partid=10 here on component overview   
  52.   }

Answers (3)