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

  • 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 ?

    Wednesday, December 18, 2019 8:45 PM

All replies

  • 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
    
    

    Wednesday, December 18, 2019 9:53 PM
  • User696604810 posted

    thank you for reply

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

    Wednesday, December 18, 2019 10:12 PM
  • 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

    Wednesday, December 18, 2019 10:37 PM
  • 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?

    Thursday, December 19, 2019 1:56 AM