如何允许路由获取网址本地主机:4200/概述?部分=数字



problem

如何更改路由以获取此URL 本地主机:4200/概述?部分=数字 ?

在这里将任何动态数字编号为 5 等。

当我在我的角度应用程序的URL上写字时需要

本地主机:4200/概述?部分=数字 ?

然后它将转到概述组件,它将在 URL 中更改为

本地主机:4200/概述?部分=数字 ?

所以如何更改路由以获取指定的 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 
}

In app-routing.module.ts

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

在组件中

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']);
});

最新更新