angular - 使用相同的 URL 参数重新加载 Angular 4+ 路由

Question

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

我遇到的问题是，当 URL 相同(包括参数)时，我试图找到一种 DRY(不要重复自己)方法来跨多个组件进行这项工作。在 AngularJS 中，使用 UI 路由器很简单。

用例:

我有一个可以“漂浮”在任何路线上方的通知面板，当点击一个通知时，它需要转到它相关的内容——这可以是许多不同类型的内容。

例如:/posts/:id 或 /groups/:id 或 /users/:id

如果用户已经在查看该内容，则不会重新加载和刷新以反射(reflect)通知消息。即“John Doe 评论了您的帖子”(用户可能正在查看该帖子的过时版本)或“Jane Doe 接受了您加入某个群组的请求”(用户可能正在查看该群组的 guest View )。

当检测到路线相同时，我确实研究过使用 window.location.reload()，并且可行，但由于开销，它非常不受欢迎它会导致( Angular 重新初始化、身份验证检查、套接字重新连接等)。

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

Answer 1

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

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

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