无涯教程网

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

发布于08月15日

摘要

我正在try 设置到同一组件的导航，该组件可以动态加载不同的内容，但无法正确加载.

细节

我有一个简单的应用程序，其路由设置为app.module.ts:

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

和路由进口声明:

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

我添加了从reading the documentation开始的"重新加载".在PostComponent中，我将插件设置为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()不会运行).

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

推荐答案

问题是您正在访问snapshot上的slug变量.snapshot只提供了一个第一次可以找到的值(见this answer).当您访问不带snapshot的paramMap时，您将获得一个可观测数据，可按如下方式订阅:

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

因此，每次参数映射更新为新值时，this.slug变量都会更新.

Angular相关问答推荐

在Angular 17中加载页面时打开打印对话框

如何在init为FALSE时以Angular 初始化主拇指擦除器-Swiper 11.0.6Angular 17 SSR

以17角表示的自定义元素

有没有其他代码可以用函数的方式写成Angular ？

茉莉花-模板中调用了如何判断角管

如何使用独立组件在ANGLE(16+)中实现嵌套布线

如何将参数传递给Angular 服务

如何让 ag-Grid 事件读取私有方法？

Angular *ngIf 表达式中这么多冒号的作用是什么？

Angular 信号在 effect() 中使用 debounce

如何更改 Angular material 按钮中的内部 RippleColor 和 UnboundedRipple 效果？

如何在 Angular 中将tailwind 类传递给 fontawesome

Angular 2：Validators.pattern() 不工作

类型错误：无法读取未定义的属性

如何处理解析器中的错误

material Angular手风琴header/title高度

如何设置背景 colored颜色 IONIC 4

如何从 EventEmitter 函数返回值？

Angular：找不到不同的支持对象[object Object]

单元测试错误：无法从同步测试中调用 Promise.then

实用课程推荐

相关教程推荐