在 Ionic 中更改 HTML 时避免整页重新加载

Posted

技术标签:

【中文标题】在 Ionic 中更改 HTML 时避免整页重新加载【英文标题】:Avoid full page reload when changing HTML in Ionic 【发布时间】:2019-01-28 04:53:17 【问题描述】:

在 Ionic 中,当您仅更改 .scss 文件时,它们会被编译并注入应用程序的当前页面,而无需重新加载整个项目。这太棒了,大大改善了工作流程。

但是,如果您更改任何 html 文件,应用程序确实会重新加载。结果是应用程序重置到根页面,或者您尝试直接转到嵌套页面时收到错误。如果您在导航层次结构中有点深的页面中工作,那将是一个问题。你可以在那里工作几个小时。再次点击进入该页面只是为了查看一些微小的更新并继续工作变得乏味。

我们能否实现与 .scss 文件一样的无缝更新?我知道这可能与 HTML 的 Angular 端有关,我认为正因为如此,javascript 也不能​​提供无缝更新。但在那种情况下,我猜我们总是可以强制重新加载。

提前致谢!

【问题讨论】:

我认为这就是为什么该功能被称为实时重新加载;/但是如果有更好的方法会很好 【参考方案1】:
ionic serve –-nolivereload

正如http://ionicn.com/docs/cli/test.html 中提到的,上面的命令应该做你想做的事


正确理解问题后更新:

作为一种解决方法,您可以设置 Ah 好的,抱歉。作为解决方法,您可以将当前正在处理的组件设置为根页面:

this.rootPage = WorkingComponent;

然后您将在重新加载后从那里开始。但很明显,这在很长一段时间内都不是很舒服。

【讨论】:

感谢您的回答 Yannick,但我认为我没有很好地解释自己。我确实想要实时重新加载功能,但不会强制整个项目刷新。仅更改 SASS 文件时,我们已经有了这种模式。它们被注入应用程序的当前状态,而无需重新加载浏览器。我的问题是关于如何实现相同但使用 HTML 文件。顺便说一句,该链接看起来很过时,它是针对 v1.1 的。 CLI 选项--nolivereload 已弃用,现在推荐的是--no-livereload。无论如何感谢您的帮助:) 好吧,对不起。我将更新我的问题以寻求解决方法。在找到合适的解决方案之前,它可能会有所帮助。 好吧,这可以做到,但前提是当前页面的状态不依赖于先前的交互。例如,简单的情况:一个项目详细信息页面通常依赖于从前一个(项目列表)页面传递的项目本身。但是这个解决方法有点聪明,我想我可以暂时模拟状态,所以总比没有好。谢谢你,亚尼克。 是的,我知道你的意思。但我很高兴在找到更好的解决方案之前对您有所帮助。

以上是关于在 Ionic 中更改 HTML 时避免整页重新加载的主要内容,如果未能解决你的问题,请参考以下文章

Ionic2 x Angular:导航更改时的服务重置

在 Livewire 中强制重新加载整页

每次我需要进行 React 更改时如何避免重新启动服务器?

避免Android在方向更改时自动重新添加我的片段

您的一些测试进行了整页重新加载 - 运行 Jasmine 测试时出错

Qt:避免在字符串更改时重建应用程序