破坏Angular2应用程序

时间:2017-04-12 09:20:50

标签: 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 但是,当我导航到非角度页面时,我可以看到组件仍然存在于内存中并导致性能问题再次打开同一页。

Chrome Profile tab of chrome

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

这里有什么问题。正在破坏应用程序还不足以清除内存吗?

1 个答案:

答案 0 :(得分:0)

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

如果您正在寻找一个在销毁角度应用程序时执行的事件,则可以使用具有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));

请参见https://github.com/axios/axios