23

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

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

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

设置这么多，现在到问题/问题：

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

我已经尝试/发现的：

  • 似乎注册了事件，但由于选项卡在后台，因此它们不会执行，而是在您返回选项卡后同时执行。这是分析的屏幕截图分析截图
  • 删除 Angular 变化检测和使用ngZone: 'noop'没有效果
  • 禁用所有动画无效
  • 启用 Angular 生产模式稍微改善了一点（也可能是一种错觉），但问题仍然存在
  • 我在 Chrome 中开发，其他浏览器（例如 Firefox、Safari）也存在问题
  • 仅当路由器视图组件是 Angular 组件时才会发生，AngularJS 视图组件似乎不受影响

我目前正在开发一个干净的示例应用程序来重现该问题并提供更多上下文以进行进一步测试。我会尽快添加它。

库版本

角度：6.1.0

AngularJS：1.7.2

zone.js：0.8.26

@uirouter/角混合：6.0.0

更新（2019 年 8 月）

当前的 Lib 版本 Angular 8、AngularJS 1.7.8 和 uirouter/hybrid 8 仍在发生

4

3 回答 3

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 {
}

您将实质上 detach() 组件，然后手动检测更改。

于 2018-08-06T22:38:27.313 回答
0

尝试在每个选项卡加载时处理服务，然后创建新事件以侦听新更改。

此外，这可能有效，但考虑到 README @ https://github.com/ui-router/angular-hybrid#limitations是一种解决方法

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

限制：

我们目前支持将 Angular (2+) 或 AngularJS (1.x) 组件路由到 AngularJS (1.x) ui-view。但是，我们不支持将 AngularJS (1.x) 组件路由到 Angular (2+) ui-view。

如果您创建 Angular (2+) ui-view，则任何嵌套的 ui-view 也必须是 Angular (2+)。

因此，应从叶状态/视图开始迁移应用程序，然后向根状态/视图进行迁移。

于 2018-08-04T00:14:20.283 回答
0

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

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

没有查看您的设置，我只能猜测。也许是因为路线一直在来回走动

于 2018-08-11T13:05:16.700 回答