Angular：垃圾收集组件答案

【问题标题】：Angular: Garbage collection ComponentsAngular：垃圾收集组件
【发布时间】：2020-02-27 18:26:19
【问题描述】：

我试图了解 GabageCollector 在组件被销毁后是如何工作的。我有以下情况：

应用组件：

export class AppComponent {
  testCompoments = [1,2];

  removeOne(id){
    this.testCompoments.pop()
  }

  nop(){

  }
}

AppHTML：

<ng-container *ngFor="let t of testCompoments">
  <app-test [id]="t" (close)="removeOne($event)"></app-test>
</ng-container>
<br>

空FN

测试组件：

export class TestComponent implements OnInit {

  @Output()
  public close = new EventEmitter()

  @Input()
  id;

  constructor() { }

  ngOnInit() {
  }

  closeClick(){
    this.close.emit(this.id)
  }

}

测试HTML：

<p>{{id}}</p>
<button (click)="closeClick()">close</button>

现在，当我启动应用程序并拍摄堆快照时，我会看到内存中正确数量的对象：

然后我通过单击关闭按钮删除组件并拍摄新快照：

令我惊讶的是，还有两个对象？现在另外奇怪的是，如果我单击“EMPTY FN”按钮，它什么都不做（应用程序组件上的空功能），下一个快照如下所示：

我有几个关于这个话题的问题：

GC 的详细工作原理是什么？对于我的特殊情况，我认为 GC 无法释放内存，因为仍然存在对该对象的引用。如何找出这个引用的位置？
为什么在第一个组件被移除后没有调用 GC，但如果之后调用了空函数，则调用了 GC？
我是否必须关心这个“死”对象（假设 testcomponent 订阅了一些 observable，但通过 async-pipe 或在 ngOnDestroy 中正确取消订阅）？

【问题讨论】：

见github.com/angular/angular/issues/35575
我不在常春藤环境中。我使用角度 8
请分享当您在内存转储中选择TestComponent 实例之一时出现在“保留器”区域中的内容
@GuerricP 存在三个对象：组件、上下文、实例。 i.imgur.com/eSVMqLN.png

标签： javascript angular memory garbage-collection

【解决方案1】：

Chrome 似乎在内存中为 ngFor 保留了一个实例。内存泄漏并不像看起来那么严重。

https://angular-garbage-collection-components.stackblitz.io/

通过比较 Chrome 上的快照：

单击最后一个“关闭”会从 DOM 中删除该元素，但出于某种奇怪的原因将其保留在内存中。
单击第一个“关闭”，它将从 DOM 中删除元素，并且不会发生内存泄漏。
通过单击“关闭”删除最后一个 TestComponent 会在内存中留下一个 TestComponent。
内存中的 TestComponent 计数永远不会超过 DOM 中的项目数。
当我添加新的 TestComponents 时，额外的项目被清理并且没有可检测到的内存泄漏。

参考代码： https://stackblitz.com/edit/angular-garbage-collection-components

【讨论】：