在Angular中,导航到同一组件多次需要改变路由参数或查询参数。以下是一种解决方法的示例代码:
MyComponent
的组件。import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my-component',
template: `
My Component
Param: {{ param }}
Query Param: {{ queryParam }}
`,
})
export class MyComponent implements OnInit {
param: string;
queryParam: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.param = params.get('param');
});
this.route.queryParamMap.subscribe(queryParams => {
this.queryParam = queryParams.get('queryParam');
});
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my-component.component';
const routes: Routes = [
{ path: 'my-component/:param', component: MyComponent },
{ path: 'my-component', component: MyComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MyRoutingModule { }
Router
服务进行导航。import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
constructor(private router: Router) { }
navigateToComponent() {
const param = 'exampleParam';
const queryParam = 'exampleQueryParam';
// 导航到组件并传递参数和查询参数
this.router.navigate(['/my-component', param], { queryParams: { queryParam } });
}
}
通过以上步骤,在每次导航到MyComponent
组件时,都可以接收到路由参数和查询参数的变化。