在Angular中,要在路由中传递查询参数,可以使用queryParams参数来传递查询参数。而要在追加路由时添加查询参数,可以使用queryParamsHandling参数。
以下是一个示例代码:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { ProductComponent } from './product.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'product', component: ProductComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
template: `
`,
})
export class HomeComponent {
constructor(private router: Router) { }
goToProduct() {
this.router.navigate(['/product']);
}
goToProductWithQueryParams() {
this.router.navigate(['/product'], { queryParams: { id: 1, name: 'Product A' } });
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-product',
template: `
Product Details
ID: {{ id }}
Name: {{ name }}
`,
})
export class ProductComponent implements OnInit {
id: string;
name: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.id = params['id'];
this.name = params['name'];
});
}
}
在这个示例中,点击"Go to Product"按钮会导航到Product组件,而点击"Go to Product with Query Params"按钮会导航到Product组件并传递查询参数。在Product组件中,通过ActivatedRoute服务获取查询参数,并将其显示在组件模板中。
希望这个示例能帮助到你!