要在Angular应用程序中使用queryParams查询参数,需要在路由上声明对应的参数名称。示例代码如下:
在路由定义中声明查询参数名称:
const routes: Routes = [
{ path: 'products', component: ProductListComponent },
{ path: 'products/:id', component: ProductDetailComponent },
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: '/products', pathMatch: 'full' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { enableTracing: true })
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
在组件中获取并使用查询参数:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-product-detail',
templateUrl: './product-detail.component.html',
styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
productId: number;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.productId = +this.route.snapshot.queryParamMap.get('id');
}
}