[英]Angular: Garbage collection Components
I try to understand how the GabageCollector works after a component was destroyed.我试图了解 GabageCollector 在组件被销毁后是如何工作的。 I have the following case:
我有以下情况:
AppComponent:应用组件:
export class AppComponent {
testCompoments = [1,2];
removeOne(id){
this.testCompoments.pop()
}
nop(){
}
}
AppHTML:应用HTML:
<ng-container *ngFor="let t of testCompoments">
<app-test [id]="t" (close)="removeOne($event)"></app-test>
</ng-container>
<br>
EMPTY FN空FN
TestComponent:测试组件:
export class TestComponent implements OnInit {
@Output()
public close = new EventEmitter()
@Input()
id;
constructor() { }
ngOnInit() {
}
closeClick(){
this.close.emit(this.id)
}
}
TestHTML:测试HTML:
<p>{{id}}</p>
<button (click)="closeClick()">close</button>
Now when i start the app and take a heap-snapshot i see the right amount of objects in memory:现在,当我启动应用程序并拍摄堆快照时,我会在内存中看到正确数量的对象:
Then i remove a component by clicking the close-button and take a new snapshot:然后我通过单击关闭按钮删除一个组件并拍摄新快照:
To my surprise, there are still two objects?令我惊讶的是,还有两个对象? And now additionally the strange thing is, if i click the "EMPTY FN" button, which does nothing (empty-function on app-component), the next snapshot looks like this:
现在另外奇怪的是,如果我点击“EMPTY FN”按钮,它什么都不做(app-component 上的空函数),下一个快照看起来像这样:
I have a few questions about this topic:我有几个关于这个话题的问题:
It seems Chrome keeps one instance in memory for ngFor. Chrome 似乎在内存中为 ngFor 保留了一个实例。 Memory leak isn't as severe as it would seem.
内存泄漏并不像看起来那么严重。
https://angular-garbage-collection-components.stackblitz.io/https://angular-garbage-collection-components.stackblitz.io/
By comparing snapshots on Chrome:通过比较 Chrome 上的快照:
Code for reference: https://stackblitz.com/edit/angular-garbage-collection-components参考代码: https : //stackblitz.com/edit/angular-garbage-collection-components
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.