用户使用f5重新加载页面时,如何正确进行角度处理?

里德尔·埃尔南德斯·婴幼儿

我是Angular 2-4的新手,现在用f5重新加载页面时遇到问题。如我所见,问题在于我正在导航至同一条路线,因此ngOnInit()不会再次加载。在ngOnInit()中,我初始化了一些使用的变量和动态形式。我已经看到了一种可能的解决方案,即订阅路由的参数,然后调用一个初始化所有内容的方法。像这样:

this.activeRoute.params.subscribe(
params => {
   this.paramX = params['paramX'];
   this.initializeComponent();
});

private initializeComponent() {

}

  那是正确的方法吗?这是一个好习惯还是应该以另一种方式呢?提前致谢。

桑福德

正式化我的评论:如果您使用浏览器的刷新/重新加载,或Location.reload()刷新角度应用程序上的任何页面,则必须ngOnInit()再次运行,并执行所有其他生命周期挂钩

这是因为您要从头开始重新加载整个应用程序,一直到platformBrowserDynamic().bootstrapModule(AppModule)然后重新引导所有内容。这就是刷新的作用

如果需要演示,请打开“开发人员工具”,然后在组件中设置一个断点ngOnInit()然后单击“刷新”。您将在断点处停止。

您以后的注释中的措词“输入相同的路线”假定已经存在一条已知的路线。没有,因为该应用程序已完全重新引导。

您可能正在考虑router.navigate([...])使用相同的路径参数调用您的当前位置。这不会发出NavigationStart事件,路由器也不会尝试加载任何内容(因为为什么这样做,所以您没有导航过任何地方)。反过来,它将不会调用ngOnInit()

就是说,是的,当前处理路径参数的方式是最好的解决方案,主要是因为它允许您对路径中的更改做出反应,而不必强制您重新初始化组件。

换句话说,如果您所有的组件逻辑都依赖于在OnInit上设置的动态路径参数,那么如果在实例化组件后更改了参数,会发生什么?没有。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在用F5重新加载页面后,Asp.net MVC 5视图才呈现

即使页面以角度5重新加载后,如何在本地将值存储到变量

如何在JxBrowser中重新加载“ Ctrl + F5”页面

重新加载页面后未获得以前的状态名称[使用F5键]

刷新页面时如何防止重新提交表单(F5 / CTRL + R)

在 AngularJs 中重新加载时如何具有与 F5 相同的行为

向后移动时HTML5重新加载页面

如何每5秒重新加载一次页面?

Aurelia 路由 - 使用 Webpack Dev Server 时使用 F5 重新加载网站会导致错误的包 URL

使用laravel-6重新加载页面时Vue-Router中断

Masonry在moblie浏览器(chrome)上不起作用,并且仅当我重新加载(ctrl + f5)页面而不在刷新(f5)上时才在Chrome桌面版本上起作用

用户重新加载页面时如何更新图像/徽标?

当用户尝试使用jquery脚本使用f5,ctrl + 5刷新浏览器页面时,警报不起作用

我如何保持弹出div始终打开,甚至在刷新/重新加载页面时,直到用户使用HTML5本地存储将其关闭

使用Ctrl + F5只能在React页面刷新中进行条件渲染

p:selectOneMenu在按F5时无法正确刷新

动态重新加载页面时如何使用函数

使用localstorage重新加载页面时,如何更新输入值?

如何使用AngularJS刷新(F5)并获取另一个页面?

CSS 在页面加载/重新加载时未正确呈现

使用新参数的WPF重新加载页面

反应| 如何检测页面刷新(F5)

使用curl时如何正确处理gzip压缩的页面?

仅在页面加载时处理f:viewParam

如何避免重新加载时使用参数对URL进行解码

使用角度指令在页面加载时重新缩放和裁剪图像

oauth2重新加载用户权限

单击按钮时如何重新加载页面?

重新加载页面时使用PHP会话