在Angular 2中导航到当前路由？

17 浏览
0 Comments

在Angular 2中导航到当前路由？

我正在尝试在Angular中重新加载当前页面。

所以当我重新加载页面时，我的根组件被调用并执行了这行代码：

console.log(this.router.routerState.snapshot.url)

它打印出"/component-x"，

然后我执行了这行代码：

this.router.navigate(['/component-x]')

但它不起作用，我被注销了。

在Angular中是否支持导航到当前路由？

还有其他方法可以实现重新加载当前页面吗？

请注意，我的应用程序正在AWS的Cloudfront上托管，并且我已经设置了一个规则，当发生404错误时返回index.html（即刷新页面时），我按照这个指南进行了操作，希望能够重新加载当前路由：https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

但它仍然不起作用。请问有人能指出我漏掉了什么吗？

谢谢！

0

1 答案

0 Comments

问题的出现原因：在Angular 2中，当导航到当前路由时，页面不会重新加载，这可能会导致一些问题。

解决方法：我们可以使用Angular路由器中的onSameUrlNavigation属性和runGuardsAndResolvers属性来解决这个问题。

onSameUrlNavigation属性用于配置路由器，通过将其设置为'reload'，可以在导航到当前路由时重新加载页面。

runGuardsAndResolvers属性用于在路由上设置，通过将其设置为'always'，可以确保路由守卫和解析器始终运行。

接下来，我们需要在组件中监听NavigationEnd事件，以便在导航到当前路由时重新初始化组件。

最后，为了避免内存泄漏，我们需要在组件销毁时取消订阅navigationSubscription。

代码如下：

// 在路由配置中设置onSameUrlNavigation属性
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule],
// 在路由配置中设置runGuardsAndResolvers属性
export const routes: Routes = [
 {
   path: 'my-path',
   component: MyComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/my-path/mycomponent.module#MyComponentModule',
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 }
]
// 在组件中监听NavigationEnd事件
export class MyComponent implements OnInit, OnDestroy{
 navigationSubscription;
 constructor(private router: Router) {
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     if (e instanceof NavigationEnd) {
       this.initialiseMyComponent();
     }
   });
 }
 ngOnInit() {
   // 初始化组件
   this.initialiseMyComponent();
 }
 initialiseMyComponent() {
   // 设置默认值和重新获取需要的数据
 }
 ngOnDestroy() {
   // 取消订阅以避免内存泄漏
   if (this.navigationSubscription) {  
     this.navigationSubscription.unsubscribe();
   }
 }
}

现在，通过以上两个更改，您的路由器已经配置完成，可以重新加载页面了。希望这对您有帮助。不幸的是，文档对这些内容解释得不够清晰。

请注意，我已经删除了“Snippet”标记，因为在Stack Overflow中无法将Angular作为片段执行。如果要创建可执行的示例，您可以考虑将代码复制到Stackblitz中。

0