Angular组件不销毁时内存对象残留问题排查求助

我开发了一个复杂的Angular应用，浏览器很快就会崩溃，正在进行性能优化。已修复所有订阅内存泄漏问题，但问题仍存在。于是使用Chrome调试工具的Memory面板录制会话排查，仅激活少量功能分析。

我有一个永不销毁的组件，每次点击菜单都会调用refreshWrapper()函数：

refreshWrapper() {
    // RESET
    this.appS.structure.reset(this.type, this.wrapper, this.appS.navigationS.navigations[this.type + '.' + this.wrapper].step);
    // GET GRID
    this.appS.restS.post('grid/elements', { route: this.route }).subscribe(response => {
            this.appS.structure.displayeds[this.type + '.' + this.wrapper] = new SiteModule(response.displayed);
    });
}

以下是Structure模型的reset函数，用于清除变量：

reset(type: string, wrapper: string, step: string) {
     delete this.displayeds[type + '.' + wrapper];
}

SiteModule类构造函数：

constructor(datas ?) {
Object.assign(this, datas);
// GRIDS
if (datas?.grids) {
  this.grids = [];
  datas.grids.forEach(grid => {
    this.grids.push(new Grid(grid));
  });
}
}

Grid类构造函数：

constructor(datas ?, element ?: Element) {
Object.assign(this, datas);
// BLOCS
if (datas?.blocs) {
  this.blocs = [];
  datas.blocs.forEach(bloc => {
    this.blocs.push(new GridBloc(bloc, element));
  });
}
}

GridBloc类构造函数：

constructor(datas ?, element ?: Element) {
Object.assign(this, datas);
// ELEMENTS
if (datas?.elements) {
  this.elements = [];
  datas.elements.forEach(e => {
    this.elements.push(new Element(e, element));
  });
}
}

Element类构造函数：

constructor(datas ?, element ?: Element) {
Object.assign(this, datas);
// DETAILS
if (datas?.details) {
  this.details = [];
  datas.details.forEach(detail => {
    this.details.push(new Detail(detail, this.ressource_id));
  });
}
}

内存排查发现 #

在Chrome Memory面板中，仅能看到一个SiteModule对象，但存在大量残留的Element对象——每次点击菜单调用refreshWrapper()后，旧的Element对象仍未被回收。

上图中，第一个指向element.model.ts:61的是当前有效的对象，其余均为旧对象。请问旧对象旁的“[10] dans (GC roots) @3”是什么意思？

我推测是组件未销毁且变量存储在全局服务（AppS）中导致的垃圾回收问题，但不确定具体原因，请问该如何解决？

内容的提问来源于stack exchange，提问作者MatDepInfo