AngularJS升级应用程序在浏览器选项卡位于后台时无响应

我有一个AngularJS升级应用程序，目前正在将AngularJS的所有内容迁移到AngularJS。这是一个相当大的项目，所以我肯定需要升级

我使用@uirouter/angular混合模式，根状态仍然是AngularJS（导航和东西）和一个子视图。在这个子视图中，我现在正在慢慢地将所有组件升级到Angular。出于性能原因，我不得不使用降级模块（）而不是升级模块

对于UI组件，我使用角度材质2

设置到此为止，现在进入问题：

当带有页面的选项卡位于后台，并且您稍后返回页面（至少5到10分钟）时，整个页面会延迟并且没有响应。你离开的时间越长，标签在后台，滞后时间就越长

我已经尝试/发现的：

• 似乎有已注册的事件，但由于选项卡位于后台，因此不会执行这些事件，而是在返回选项卡后同时执行所有事件。这是一个分析的截图
• 删除角度变化检测并使用

  ngZone:“noop”

  无效
• 禁用所有动画无效
• 启用角度生产模式稍微改善了一点（也可能是一种错觉），但问题仍然存在
• 我使用Chrome开发，其他浏览器（如Firefox、Safari）也存在这个问题
• 仅当路由器视图组件是角度组件时发生，AngularJS视图组件似乎不受影响

我目前正在开发一个干净的示例应用程序来重现这个问题，并为进一步的测试提供更多的上下文。我很快就会加上

库版本 角度：6.1.0

AngularJS:1.7.2

zone.js:0.8.26

@uirouter/angular hybrid:6.0.0

更新（2019年8月）

---

当前的Lib版本AngularJS 1.7.8和uirouter/hybrid 8仍在使用中，请尝试在每次加载选项卡时处理服务，然后创建新事件以侦听新更改

此外，这可能有效，但考虑到自述文件@

自述文件的这一部分可能暗示降级不是一个无缝的选项：

限制： 我们目前支持将AngularJS（2+）或AngularJS（1.x）组件路由到AngularJS（1.x）ui视图中。但是，我们不支持将AngularJS（1.x）组件路由到AngularJS（2+）ui视图中

如果创建角度（2+）ui视图，则任何嵌套ui视图也必须是角度（2+）视图

因此，应用程序应该从叶状态/视图迁移到根状态/视图

---

尝试在所有ng2组件上使用此实现模式

其概念是，它将删除由angularjs进行更新或渲染的组件

从文件中：

class DataListProvider {
  // in a real application the returned data will be different every time
  get data() { return [1, 2, 3, 4, 5]; }
}

@Component({
  selector: 'giant-list',
  template: `
      <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
    `,
})
class GiantList {
  constructor(private ref: ChangeDetectorRef, private dataProvider: DataListProvider) {
    ref.detach();
    setInterval(() => { this.ref.detectChanges(); }, 5000);
  }
}

@Component({
  selector: 'app',
  providers: [DataListProvider],
  template: `
      <giant-list><giant-list>
    `,
})
class App {
}

类DataListProvider{
//在实际应用程序中，每次返回的数据都是不同的
get data（）{return[1,2,3,4,5]；}
}
@组成部分({
选择器：'巨型列表'，
模板：`
数据{{d}
`,
})
职业巨人名单{
构造函数（私有引用：ChangeDetectorRef，私有数据提供程序：DataListProvider）{
参考detach（）；
setInterval（（）=>{this.ref.detectChanges（）；}，5000）；
}
}
@组成部分({
选择器：“应用程序”，
提供者：[DataListProvider]，
模板：`
`,
})
类应用程序{
}

---

您将从本质上分离（）组件，然后手动检测更改。

您是否尝试查看UrlHandlingStratery？ 我们设法在AngularJS堆栈的顶部使用AngularJS，并在必要时缓慢地重新写入

我们所做的是使用AngularJS路由器和AngularJS路由器，使用UrlHandlingStrategy确定Angular将处理哪个路由，如果AngularJS不处理该路由，它将转到AngularJS路由

---

不看你的设置，我只能猜测。可能是因为路线一直在来回移动，所以

您在每次加载选项卡时处理服务是什么意思？什么服务？至于第二部分，这在我们的案例中并不重要。我们严格遵守他们的指导方针。角度JS父视图和角度2+子视图。如果您以另一种方式尝试，routher会抛出一个硬异常，根据您的应用程序，尝试处理这两种情况：@NicolasGehlert我目前正在为此编写一个基本测试。你说“当页面的标签在后台时…”。这是一个常规的web浏览器选项卡，而不是带有内容选项卡的某种UI组件？@NicolasGehlert如果它是一个浏览器“选项卡”，如果您允许该页面（如中所述，该页面是浏览器中的活动查看选项卡）坐一会儿，它会恢复反应和工作吗？@NicolasGehlert你能检查一下以下测试的结果吗：1。刷新第2页。模糊页面，转到另一个选项卡30或60秒（可能需要更长时间才能看到延迟）。3.返回选项卡，注意响应级别1-10，1非常慢，10正常。4.重复此测试，将页面模糊时间增加到5分钟或10分钟。谢谢您的回答。我会试试这个。还不太确定如何在没有间隔的情况下检测更改您希望我分离父页面组件或此页面上使用的所有组件吗？只是尝试了页面组件本身，没有什么不同@CaptWebDesigner仍在努力获得更精确的根级别答案。事实上我做了，但问题是我有一个相当复杂的抽象状态设置，我需要为两个版本复制它。所以我是一种使用UI路由器混合的力量。状态转换很好，没有状态乒乓球。至少不在外面，我不知道他们在引擎盖下做什么，但我严格遵守