如何将 Angular 中的导航路由到同一页面并重新加载

Question

总结

我正在尝试设置导航到动态加载不同内容的同一组件，但无法正确加载。

详情

我有一个简单的应用程序，其中设置了路线

app.module.ts

:

const routes: Routes = [
  {path: 'posts/:slug', component: PostComponent}
];

以及路由器进口声明：

RouterModule.forRoot(routes, { onSameUrlNavigation: "reload"}),

我从阅读文档添加了“重新加载”。在

PostComponent

中，我将 slug 设置为

OnInit()

中的属性：

ngOnInit(): void {
  this.slug = this.route.snapshot.paramMap.get('slug') as string;
}

当我在我的

post.component.html

上声明这一点时：

{{ slug }}
<a routerLink="/posts/through-a-router-link">Through A Router Link</a>

它第一次正确加载页面，但是当我单击链接时，它将我的 URL 更新为

localhost:4200/posts/through-a-router-link

但我的内容没有刷新（即

OnInit()

不运行）。

如何导航到具有不同 slug 的同一组件并强制刷新内容？

Answer 1

当该页面已经加载时，它不会销毁并创建相同的组件。相反，它会保持所有内容加载并仅更新路线。因此，您需要使用路由器服务来监听路径中的变化：

  constructor(
    private router: Router
  ) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        // User has navigated to new page.
        // Update content.
      }
    })
  }

Answer 2

问题是您正在访问

snapshot

上的 slug 变量。

snapshot

仅提供第一次可以找到的值（请参阅这个答案）。当您访问不带

paramMap

的

snapshot

时，您将获得一个 Observable，可以像这样订阅：

ngOnInit(): void {
    this.route.paramMap.subscribe((paramMap) => {
        this.slug = paramMap.get('slug') as string;
    });
}

因此每次 paramMap 更新为新值时，

this.slug

变量都会更新。