Angular内存泄漏问题：简单输入框引发分离节点

你遇到的这个问题本质是Angular的[(ngModel)]双向绑定在有输入值时的残留引用导致的：

• 当你在输入框输入内容时，ngModel指令会创建内部的FormControl实例，同时这个指令会持有Page2Component的引用——因为它需要同步组件的inputText属性值。
• 导航离开Page2时，虽然组件触发了ngOnDestroy，但带有输入值的FormControl会让Angular内部的一些关联引用没有被及时释放。这些引用会阻止组件实例被垃圾回收，最终导致组件出现在内存快照的分离节点中。
• 未输入内容时，FormControl处于初始空状态，Angular的自动清理机制可以正常回收所有相关引用，因此不会出现泄漏。

方案1：完善独立组件的FormsModule导入并手动清理ngModel #

你的独立组件未导入FormsModule（这其实是ngModel能正常运行的前提），同时需要在销毁时手动清理表单控件引用：

import { Component, OnDestroy, ViewChild } from '@angular/core';
import { FormsModule, NgModel } from '@angular/forms';

@Component({
    selector: 'app-page2',
    standalone: true,
    imports: [FormsModule], // 必须导入才能使用ngModel
    templateUrl: './page2.component.html',
    styleUrls: ['./page2.component.scss']
})
export class Page2Component implements OnDestroy {
    inputText: string = '';
    @ViewChild(NgModel) ngModel!: NgModel;

    ngOnDestroy() {
        this.ngModel.control.destroy(); // 手动销毁表单控件
        this.inputText = '';
    }
}

方案2：改用响应式表单（更推荐） #

响应式表单的生命周期管理更可控，能避免这类隐性引用问题：

import { Component, OnDestroy } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
    selector: 'app-page2',
    standalone: true,
    imports: [ReactiveFormsModule],
    templateUrl: './page2.component.html',
    styleUrls: ['./page2.component.scss']
})
export class Page2Component implements OnDestroy {
    inputControl = new FormControl('');

    constructor() {
        // 若需要监听值变化，用takeUntilDestroyed自动清理订阅
        this.inputControl.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {
            // 处理值变更逻辑
        });
    }

    ngOnDestroy() {
        this.inputControl.destroy(); // 销毁表单控件
    }
}

对应的HTML模板修改为：

<p>page2 works!</p>
<div>
    <input type="text" [formControl]="inputControl" />
</div>

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