如何让路由得到urllocalhost:4200/overview？ Partid=编号

Question

问题

如何更改路由以获得此 URL localhost:4200/概览？ Partid=编号 ?

此处为任意动态数字编号，如 5 等。

我需要在 angular 应用的 URL 上写字

localhost:4200/概览？ Partid=编号 ?

然后它将转到概览组件，它会在 URL 中更改为

localhost:4200/概览？ Partid=编号 ?

so URL 指定如何更改路由以获取此信息

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 { }

overview component

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 
  }

Answer 1

在应用程序中-routing.module.ts

{ path: 'overview/:Partid', component: OverviewComponent },

在Component.ts

import { Router, ActivatedRoute, ParamMap } from "@angular/router";
////
constructor(public partDetailsService: PartDetailsService
    ,         public companyService: CompanyService, public route: ActivatedRoute)
////
this.route.params.subscribe((params: ParamMap) => {
                const Partid = Convert.StringToInt(params['Partid']);
});

如何让路由得到urllocalhost:4200/overview？ Partid=编号

How to allow routing to get url localhost:4200/overview? Partid=number

angular

typescript

angular7

angular7-router