Angular 内存泄漏：简单输入导致分离节点

Question

我已经生成了用于测试目的的角度应用程序，创建了 Page1 和 Page2 组件。 是第2页的代码

TypeScript (Page2Component)

import { Component, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-page2',
    standalone: true,
    imports: [],
    templateUrl: './page2.component.html',
    styleUrls: ['./page2.component.scss'] // Corrected to `styleUrls`
})
export class Page2Component implements OnDestroy {
    inputText: string = '';

    ngOnDestroy() {
        // Clear the input text or perform other cleanup actions
        this.inputText = '';
    }
}


HTML (page2.component.html)

<p>page2 works!</p>
<div>
    <input type="text" [(ngModel)]="inputText" />
</div>

重现问题的步骤：

1. 导航到第 2 页，在输入中键入内容。
2. 导航至第 1 页，拍摄快照。

我在分离节点中看到 page2，因为我已在输入字段中输入内容。如果我不在该字段中输入，则该字段不存在。

请有人解释一下为什么在输入中键入会导致节点分离？我没有任何订阅，它只是简单的组件之上，提前感谢

我没想到内存泄漏

Answer 1

垃圾收集是无法预测的，当内存堆满了或者随时都会清除，所以最终数据都会被清除。所以最好不要进行如此详细的检查。

未取消订阅的 Observable、

setTimeout

或

setInterval

未清除是更有效的内存泄漏情况。