我一直在对重新加载 Angular 4+ 路由进行一些研究，看起来首选方法是改为监听组件内的 URL 参数更改并在那里重新初始化组件。
我遇到的问题是在 URL 相同（包括参数）的情况下，试图找到一种 DRY（不要重复自己）方法来使其跨多个组件工作。在 AngularJS 中，使用 UI-router 很简单。
用例：
我有一个可以“浮动”在任何路线上方的通知面板，当单击通知时，它需要转到与之相关的内容 - 这可以是许多不同类型的内容。
例如：/posts/:id或/groups/:id或/users/:id
如果用户已经在查看该内容，它不会重新加载和刷新以反映通知的消息。即“John Doe 评论了您的帖子”（用户可能正在查看该帖子的过时版本）或“Jane Doe 接受了您加入某个组的请求”（用户可能正在查看该组的访客视图）。
window.location.reload()当检测到路由相同并且有效时，我确实考虑过使用，但由于它导致的开销（角度重新初始化、身份验证检查、套接字重新连接等），这是非常不可取的。
任何建议将不胜感激！
在这种情况下，您的路线不会改变，只是您的参数会改变。
要解决此问题，您需要订阅 ActivatedRoute 参数。
export class MyClass implements OnInit {
constructor(private activatedRoute: ActivatedRoute ) {
this.activatedRoute.params.subscribe((params)=>{
console.log('updatedParams', params);
});
}
}
You have to subscribe route params so that whenever it changes we can handle changes. Below is sample code from my project which is working perfectly fine.
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.
}
Here when param value changes in URL with same route it will not reload page but just change value as we are calling initializePage(id) which will re initialize everything.
Hope this help you.
当 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();
}
}
然后，您可以将此服务添加到providers需要对更改做出反应的组件列表中（PostsComponent、GroupsComponent等）。最后，您可以将其注入那些相同的组件并订阅idChangeobservable：
@Component({
templateUrl: './posts.component.html',
providers: [
IdWatchService
]
})
export class PostsComponent {
constructor(idWatchService: IdWatchService) {
idWatchService.idChange.subscribe(id => {
// Load data for the new ID and refresh the view
});
}
}
我在 Angular 2 中遇到了相同的场景（非常相似的用例）。就像其他答案所说，我发现在 Angular 中没有内置的方式来做到这一点（也许框架假设是这种情况应该通过监听来解决参数的变化）。
像你一样，我不想重写我的代码，所以我使用了一个不同的解决方案，它有点老套，但它不需要太多改变就可以工作。
我使用的解决方案是在需要重新加载页面的同一层次结构下创建一个虚拟路由。在虚拟路由中，我使用了一个 DummyComponent，它在路由参数中接收数据，该数据描述了我们需要去的下一个路由（我们要重新加载的路由）以及我应该将哪些参数传递给它（例如 id you已经提到），然后我使用注入的 Rounder 类和 Navigation 方法转到该路线。
我认为这个解决方案将比使用 window.reload 更有效，而且它的编写非常简单。（我无法复制该代码示例，因为我无权访问该代码）
通过this.router.url您将获得当前页面的 url。比使用路由导航和 queryParames 一样。以下是传递 queryParams 作为分页页面的示例。您可以使用类似的方法。
const url = this.router.url.split('?')[0]; // this will remove previous queryparms
this.router.navigate([url], { queryParams: { page: $event } });
我在标题中的通知部分遇到了同样的问题我已经用 DoCheck 解决了这个问题
import { Component, DoCheck } from '@angular/core';
在 Class 中实现 DoCheck 接口
export class HeaderComponent implements DoCheck {
然后使用 ngDoCheck() 方法并验证变量值是否发生变化，它将在您的通知区域中显示相同
ngDoCheck() {
// check if values changes
}
window.location.reload();
这对我有用。