如何在移动设备上解决 Angular 应用程序平移问题？答案

【问题标题】：How to fix Angular app panning problem on mobile?如何在移动设备上解决 Angular 应用程序平移问题？
【发布时间】：2022-08-15 03:42:05
【问题描述】：

我已经完成了我的 Angular 应用程序（简单的预订应用程序），并且在桌面浏览器中一切正常。

然后当然开始在移动浏览器（主要是Android Chrome和Firefox）上进行远程测试，并遇到了奇怪的问题。

例如，当我将视图过滤到表 3，然后开始使用手机的触摸屏滚动此视图时……此视图立即恢复为默认值（用户再次看到表 1 和表 2）。

为了更好地理解这个问题，我附上了视频。 Mobile Screen Pan Problem

我会提到这个问题只在移动浏览器上存在。

我正在使用 Angular 指令 *ngIf 来过滤我的视图......并且视图基于数组。（在用户单击 Pick 然后选择要显示的表 3 后，数组的其余列在模板解析期间被 *ngIf 清空并跳过）

调试 chrome 控制台中没有错误。

有什么想法可能是错的吗？

标签： angular scroll view reset panning

【解决方案1】：

您必须检查 ngIf 的条件。也许由于某些原因它会在滚动时发生变化（例如，桌子上的事件监听器）

【讨论】：

条件看起来像这样 *ngIf="unit" 其中单位可能有数据，所以它的真实然后被显示......或者单位可能为空，所以它被跳过......没有噱头......我觉得这个问题与移动有关浏览器平移功能...

【解决方案2】：

从您的视频的外观来看，背景中的reslayout.component.ts:56 正在闪烁 - 也许正在重置？在Pick 下拉列表中异步重置您的选择。同样对于移动和桌面视图，最好使用响应式布局（例如 Bootstrap）。 https://ng-bootstrap.github.io/#/components/table/overview

【讨论】：

那么应用程序基于引导程序。 Reslayout 组件在控制台中闪烁，因为我在通过电话屏幕滚动我的应用程序期间检查了数组值。仅选择此数组的归零部分以“隐藏”要显示的不必要的表。
当时没办法说，反正也只是猜测而已。请在线重现问题或提供相关代码。

【解决方案3】：

伙计们，我找到了解决方案，我怀疑这个问题与移动浏览器有关。

我的应用程序使用调整浏览器窗口事件挂钩来预先调整布局以适应任何类型的屏幕尺寸。

事实证明，当您在移动设备上触摸滚动网页时，不仅会触发触摸事件，还会触发调整大小。这就是为什么在移动设备上滚动会重置我的应用程序的视图。

【讨论】：