销毁 Angular2 应用程序答案

【问题标题】：Destroy Angular2 Application销毁 Angular2 应用程序
【发布时间】：2017-09-07 23:45:22
【问题描述】：

当用户导航到其他页面时，我需要销毁 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 但是，当我导航到非角度页面时，我可以看到组件仍然存在于内存中，并在我执行时导致性能问题再次打开同一页面。

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

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

【问题讨论】：

标签： performance angular memory-management

【解决方案1】：

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

如果您正在寻找在 Angular 应用程序被销毁时执行的事件，您可以使用具有 OnDestroy() 回调的 PlatformRef

在 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

【讨论】：