Angular2路由器 - 使用不同参数导航到当前页面

Question

Angular2路由器 - 使用不同参数导航到当前页面

31

我试图在当前页面上使用不同的参数路由，但一直没有成功。我有一个触发器为下拉框：

this.router.navigate(['page', selectedId]);

网址在变，但只有这个改变。

如何使用不同的参数路由到同一页？

- Avi

你还想要什么？URL更改是路由的预期行为... - Harry Ninh

4

尝试使用navigate(['../', selectedId], { relativeTo: route })，其中route是ActivatedRoute。该方法可帮助您导航到当前路由的父级并指定一个新的子级路由selectedId。 - Paul Samsotha

谢谢@peeskillet，不幸的是那个方法没有起作用。我得到了相同的结果，URL改变了但页面没有刷新。 - Avi

URL是否设置为您预期的URL？您是否检查了控制台是否有任何错误？如果没有错误，可能需要使用Plunker来测试一下。 - Paul Samsotha

Pardeep的回答：“但是只有在你真正想加载一些方法时才会更改你的URL，那么你必须手动调用它们。”这导致了我几分钟前面对同样问题时所使用的解决方法。我的解决方法是创建一个指向相同组件的镜像路由。如果实际路由与第一个镜像路由匹配 (this.router.url.match('/firstroute/'))，我将重定向到第二个镜像路由(this.router.navigate('/secondroute', params))，否则我将重定向到第一个镜像路由。是的，我知道，这是一种相当丑陋的解决方法……它可以工作，但是方式很丑陋 :) - Deadpool

5个回答

7

好的，在阅读了所有答案，特别是@mxii的答案后（非常感谢），我理解：

当使用不同的参数路由到同一页面时，只有参数会改变。DOM保持不变，没有组件重建，也没有OnInit周期。
OnChanges钩子在每次数据绑定更改时触发，这意味着如果我将参数传递给子组件，则不能在此参数上使用OnInit，而必须使用OnChanges钩子。

很好的课程，谢谢！

- Avi

4

你可以通过使用这个来完成。

this.router.navigateByUrl('page_url/' + your_id);

这样做可以成功更改您的参数。

但它只会更改您的URL。如果您真的想加载一些方法，那么您必须手动调用它们。

- Pardeep Jain

1

我的解决跳转到同一页不同查询参数的最简单方法是使用以下代码：

import { Router } from '@angular/router';
constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}

- Tanmay Jain

1

routeReuseStrategy在Angular 15（或更早版本）中已被弃用。 - Chuck Tung

1

我找到的最简单的方法是订阅路由器，然后重新加载页面：

this.router.navigate(['page', selectedId]).then(page => { window.location.reload(); });

- Bat

这似乎是错误的方法。shouldReuseRoute 是一个更高效的解决方案。 - nesterenes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slaesh · Accepted Answer

页面不会刷新，因为这就是路由器的工作方式...在不刷新页面的情况下！

您必须订阅路由参数以检测它们的更改，然后根据该信息执行所需操作。

因此，将ActivatedRoute注入到组件中，并像这样订阅参数：

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
     // PARAMS CHANGED .. TO SOMETHING REALLY COOL HERE ..

     // for example extract the id..
     let id = +params['id']; // (+) converts string 'id' to a number

   });
}