Angular 路由器：（类似 TAB 的）导航 - 如何在不再次运行 ngOnInit 的情况下更改 URL

Posted 2023-02-22

【中文标题】Angular 路由器：（类似 TAB 的）导航 - 如何在不再次运行 ngOnInit 的情况下更改 URL

【英文标题】：Angular router: (TAB like) navigate - how to change URL without running ngOnInit again

【发布时间】：2018-06-01 04:51:58

【问题描述】：

好的，问题很简单，但是自己好像也没有找到答案，所以请帮忙

我有这条路线（简化）：

const routes: Routes = [
  path: '', component: ListPageComponent,
  path: 'd/:id', component: DetailsPageComponent,
  path: ':param1', component: ListPageComponent,
  path: ':param1/:param2', component: ListPageComponent,
  path: ':param1/:param2/:param3', component: ListPageComponent,
  path: '**', component: ListPageComponent
];

在 ListPageComponent 顶部我有一些选择框过滤器，触发 onFilter 方法（简化）：

onFilter(filters: any) 
  this._router.navigate([
    'myroute/',
    this.param1,
    this.param2,
    this.param3
  ]);

现在，我想要的是当我触发此方法并导航（到同一个页面组件）时，我不希望该组件再次运行 ngOnInit ......只是为了更改 URL 参数（我是已经订阅了参数更改 - this._route.params.subscribe)

【问题讨论】：

您是否尝试过相对于ActivatedRoute 进行导航？我认为不应该重新加载您的组件，但我不确定，因为我只使用 queryParams 完成了它。

顺便说一句，看看你的路线，因为你正在使用某种表单元素，我认为你应该改用queryParams 更好。

@OsmanCea 是对的。使用路由器参数，您将为每条路线拥有不同的组件 - 因此只有在先前的路线具有相同的形状时，您才能拥有相同的组件。但是使用 queryParams，您可以使用一个路由 = 一个组件初始化来描述所有内容。

好吧，它们必须是不同的路线，例如 /myroute/param1/param2/...

【参考方案1】：

我终于找到了解决办法：Change route params without reloading in angular 2

可以只使用 location.replaceState，在我的情况下就像一个魅力！