Angular 重新加载角度4+；具有相同URL参数的路由

我一直在做一些关于重新加载Angular 4+路由的研究，似乎首选的方法是监听组件内的URL参数更改，然后在那里重新初始化组件

我遇到的问题是，当URL相同（包括参数）时，试图找到一种干燥（不要重复）的方法使其在多个组件中工作。在AngularJS中，使用UI路由器很简单

用例：

我有一个通知面板，它可以“浮动”在任何路由之上，当单击通知时，它需要转到与之相关的内容-这可以是许多不同类型的内容

例如：

/posts/:id

或

/groups/:id

或

/users/:id

如果用户已经在查看该内容，则不会重新加载和刷新以反映通知消息。例如，“John Doe对你的帖子发表了评论”（用户可能正在查看该帖子的过时版本）或“Jane Doe接受了你加入某个群的请求”（用户可能正在查看该群的来宾视图）

当检测到路由相同时，我确实研究了如何使用

window.location.reload（）

，这是可行的，但由于它会导致开销（角度重新初始化、身份验证检查、套接字重新连接等），这是非常不受欢迎的

---

如有任何建议，将不胜感激

当URL中没有任何更改时，无法重新加载路由。实际上，您仅有的选项是

window.location.reload（）

和监听参数更改

对于第二个选项，您可以创建一个通用服务来监视查询字符串中

id

参数的更改。我们把它称为

IdWatchService

，它看起来像这样：

@Injectable()
export class IdWatchService {
  constructor(private route: ActivatedRoute) {
  }

  get idChange(): Observable<number | undefined> {
    return this.route.queryParams.map(p => p['id'] as number | undefined).distinctUntilChanged();
  }
}

我在angular 2中遇到了相同的场景（非常相似的用例）。正如其他答案所说，我发现angular中没有内置的方法来实现这一点（可能框架假设是，这种情况应该通过侦听参数中的更改来解决）

和你一样，我不想重写我的代码，所以我使用了一种不同的解决方案，它有点粗糙，但它工作起来不需要太多的更改

我使用的解决方案是在同一级别的hirearchy下创建一个虚拟路由，您需要在其中重新加载页面。在虚拟路由中，我使用了一个DummyComponent，它在路由参数中接收数据，这些数据描述了我们需要去的下一个路由（我们要重新加载的那个路由）以及我应该传递给它的参数（比如你提到的id），然后我使用注入的Rounter类和navigate方法去那个路由

我认为这个解决方案比使用window.reload更有效，而且编写起来也很简单。（我无法复制该代码示例，因为我没有访问该代码的权限）

window.location.reload（）

---

这对我来说很有用。

在这种情况下，您的路线不会改变，只是参数会改变

要解决此问题，您需要订阅ActivatedRoute参数

export class MyClass implements OnInit {
   constructor(private activatedRoute: ActivatedRoute ) {
        this.activatedRoute.params.subscribe((params)=>{
          console.log('updatedParams', params);
        });
    }
}

---

我在标题中的通知部分也遇到了同样的问题 我已经和多切克解决了这个问题

import { Component, DoCheck } from '@angular/core';

在类中实现DoCheck接口

export class HeaderComponent implements DoCheck {

然后使用ngDoCheck（）方法并验证变量值是否更改，它将在通知区域中显示相同的值

ngDoCheck() {
    // check if values changes
}

---

通过

this.router.url

您将获得当前页面的url。而不是像查询参数一样使用路由器导航。下面是将queryParams作为分页页传递的示例。您可以使用类似的方法

const url = this.router.url.split('?')[0]; // this will remove previous queryparms
    this.router.navigate([url], { queryParams: { page: $event } });

---

您必须订阅路由参数，以便无论何时更改，我们都可以处理更改。下面是我的项目的示例代码，它工作得非常好

constructor(private router: Router) {
    this.route.params.subscribe(params => {
      this.initializePage(params['id']);
    });
}

initializePage(id:any){
//..Your code
// Consider this as your ngOnInIt() method and initialize everything here.
}

在这里，当URL中的参数值以相同的路由更改时，它不会重新加载页面，而只是更改值，因为我们正在调用initializePage（id），这将重新初始化所有内容

---

希望这对你有帮助

我认为这不是人们所要求的。引用问题>URL何时相同（包括参数）@asmmahmud我明白了。但是，如果没有

window.location.reload（）

，则无法执行此操作。我对我的答案做了一些修改，以澄清这一点。这将刷新整个页面。您看过路由器的

onSameUrlNavigation

设置了吗？默认值为

ignore

，但也有一个

reload

选项。不过，我没有这方面的经验。

constructor(private router: Router) {
    this.route.params.subscribe(params => {
      this.initializePage(params['id']);
    });
}

initializePage(id:any){
//..Your code
// Consider this as your ngOnInIt() method and initialize everything here.
}