performance - 销毁 Angular2 应用程序

标签 performance angular memory-management

当用户导航到其他页面时,我需要销毁 Angular2 应用程序(注意:这是一个我们仅在一个页面上使用 angular2 的应用程序)。因此,当用户离开此页面时,我们必须取消引导 ng2 应用程序。

我将 applicationRef 如下:

platformBrowserDynamic([
    {provide: 'ConfigService', useValue: {} }
]).bootstrapModule(AppModule).then((appModule:NgModuleRef<AppModule>)=>{
    const appRef = appModule.injector.get(ApplicationRef);

    if(!!callback)
        callback(appRef);
});

当这个页面被破坏时,我正在打电话
_ref.components[0].hostView.destroy();

哪里 _ref 是在上面的回调中传递的应用程序引用。

整个流程调用 ngOnDestroy 然而,当我导航到非 Angular 页面时,我可以看到这些组件仍然存在于内存中,并在我再次打开同一页面时导致性能问题。

Chrome Profile tab of chrome

您可以从屏幕截图中看到该组件仍然存在并消耗内存,即使我已如上所述破坏了该应用程序。

这里有什么问题。销毁应用程序不足以清除内存吗?

最佳答案

我知道这是一个非常古老的问题,但这可能会有所帮助。

如果您正在寻找在 Angular 应用程序销毁时执行的事件,您可以使用 PlatformRef其中有一个 OnDestroy()打回来

在 main.ts

function doSomethingOnAppDestory() {
  console.log('test');
}

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {

  // Ensure Angular destroys itself on hot reloads.
  if (window['ngRef']) {
    window['ngRef'].destroy();
  }
  window['ngRef'] = ref;

  ref.onDestroy(doSomethingOnAppDestory);

  // Otherwise, log the boot error
}).catch(err => console.error(err));

stackblitz demo

关于performance - 销毁 Angular2 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43365395/

相关文章:

javascript - 未指定 js 扩展时,Angular2 Typescript 应用程序在组件上抛出 404

javascript - 如何在执行下一行代码之前完成等待订阅 block ?

c# - System.LocalDataStoreElement[] 内存分配

wpf - 为什么 WPF/RotateTransform 使用如此多的 CPU?

MySQL 性能 - 字符串与整数

css - Bootstrap 按钮轮廓在单击后保持突出显示

linux - 谁安排/创建程序的不同段(堆栈、堆、代码段、数据段)

java - 定时器运行时处理

python - Pandas 变换方法执行缓慢

iOS 8 从 PHAsset 快速加载图像