限制：

Question

我有一个Angular / AngularJS升级应用程序，目前正在将所有内容从AngularJS迁移到Angular。这是一个相当大的项目，所以我绝对需要采用升级方式。

我使用@ uirouter / angular-hybrid，并且其根状态仍然是AngularJS（导航和其他内容）和一个子视图。在此子视图中，我现在正在将所有组件缓慢升级到Angular。出于性能原因，我不得不使用downgradeModule（）（https://angular.io/guide/upgrade-performance）而不是UpgradeModule。

对于UI组件，我使用Angular Material 2。

设置非常重要，现在要回答问题/问题：

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

我已经尝试过/发现的内容：

似乎已注册了事件，但是由于选项卡位于后台，因此它们不会执行，但是一旦返回到选项卡，它们将同时执行。这是剖析
删除角度变化检测并使用ngZone: 'noop'无效
禁用所有动画无效
启用Angular生产模式可以稍微改善一下（也可能是一种错觉），但问题仍然存在
我使用Chrome开发，其他浏览器（例如Firefox，Safari）也存在该问题
仅当路由器视图组件是Angular组件时，AngularJS视图组件才似乎不受影响

我目前正在开发一个干净的示例应用程序，以重现该问题，并为进一步的测试提供更多背景信息。我会尽快添加。

库版本

角度：6.1.0

AngularJS：1.7.2

zone.js：0.8.26

@ uirouter / angular-hybrid：6.0.0

Answer 1

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

https://angular.io/api/core/ChangeDetectorRef#detach-change-detector-to-limit-how-often-check-occurs

概念是，它将删除由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 {
}

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

Answer 2

尝试在每次标签加载时处理该服务，然后创建新事件以侦听新更改。

这也可能有效，但是是考虑自述文件@ https://github.com/ui-router/angular-hybrid#limitations

的一种解决方法

自述文件的这一部分可能表明降级不是一个无缝的选择：

限制：

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

如果创建Angular（2+）用户界面，则任何嵌套的ui-view也必须是Angular（2 +）。

因此，应从叶子状态/视图开始迁移应用程序，然后逐步发展到根状态/视图。

Answer 3

您是否尝试过研究UrlHandlingStratery？我们设法在AngularJS堆栈上使用了Angular，并在必要时缓慢地重新编写。

我们所做的是我们同时使用Angular和AngularJS路由器，并使用UrlHandlingStrategy确定Angular要处理的路由，如果该路由不由Angular处理，则它将转到AngularJS路由。

我没有猜测您的设置，只能猜测。也许是因为

当浏览器选项卡在后台时，Angular / AngularJS升级应用程序无响应

库版本

3 个答案:

限制：