自定义Angular模态框服务异常：嵌入组件无法接收更新

问题描述 #

我在Angular中开发了一个用于在模态框内打开组件的服务，但遇到异常：将组件内容注入模态框并插入页面后，组件功能无法正常工作。比如该组件在路由页面中能正常运行，表单输入后会校验有效性并启用保存按钮；但通过模态框服务打开时，表单始终处于不可变更状态，即使填完所有字段仍显示无效，仿佛完全没有检测到输入变更。

原代码 #

import { Injectable, Injector, ComponentFactoryResolver, Type, Inject } from "@angular/core";
import { Observable, Subject } from "rxjs";
import { ModalComponent } from "../components/modal/modal.component";
import { DOCUMENT } from "@angular/common";

@Injectable({
    providedIn: 'root'
})
export class ModalService {

    private modalNotifier!: Subject<void>;

    constructor(private resolver: ComponentFactoryResolver, private injector: Injector, @Inject(DOCUMENT) private document: Document) {}
    
    open(component: Type<any>, options: { title?: string, width?: string, height?: string }): Observable<any> {

        // 创建模态框组件
        const modalComponentFactory = this.resolver.resolveComponentFactory(ModalComponent);
        const modalDynamicComponent = modalComponentFactory.create(this.injector);
        
        // 配置模态框内部变量
        modalDynamicComponent.instance.closeEvent.subscribe(() => this.close());
        modalDynamicComponent.instance.title = options?.title;
        modalDynamicComponent.instance.width = options?.width;
        modalDynamicComponent.instance.height = options?.height;

        // 检测instance变量的变更
        modalDynamicComponent.changeDetectorRef.detectChanges();

        // 创建目标组件
        const componentFactory = this.resolver.resolveComponentFactory(component);
        const componentRef = componentFactory.create(this.injector);

        componentRef.changeDetectorRef.detectChanges();

        // 将创建的组件内容添加到模态框中
        modalDynamicComponent.instance.contentViewRef.insert(componentRef.hostView);

        // 将模态框添加到页面
        this.document.body.appendChild(modalDynamicComponent.location.nativeElement);

        this.modalNotifier = new Subject();
        return this.modalNotifier.asObservable();

    }

    close() {
        this.modalNotifier.next();
        this.modalNotifier.complete();
    }

}

问题原因 #

核心问题是动态组件的变更检测上下文未正确关联：

• 直接使用全局Injector创建内部组件时，组件没有被纳入Angular的变更检测树，导致表单输入的变更无法被检测到，表单状态始终保持初始的无效状态。
• 原代码未在关闭模态框时销毁动态组件，会造成内存泄漏。

修改后的代码 #

import { Injectable, Injector, ComponentFactoryResolver, Type, Inject } from "@angular/core";
import { Observable, Subject } from "rxjs";
import { ModalComponent } from "../components/modal/modal.component";
import { DOCUMENT } from "@angular/common";

@Injectable({
    providedIn: 'root'
})
export class ModalService {

    private modalNotifier!: Subject<void>;
    private activeModalComponents: Array<{modal: any, content: any}> = []; // 存储活跃组件，用于销毁清理

    constructor(private resolver: ComponentFactoryResolver, private injector: Injector, @Inject(DOCUMENT) private document: Document) {}
    
    open(component: Type<any>, options: { title?: string, width?: string, height?: string }): Observable<any> {

        // 创建模态框组件
        const modalComponentFactory = this.resolver.resolveComponentFactory(ModalComponent);
        const modalDynamicComponent = modalComponentFactory.create(this.injector);
        
        // 配置模态框内部变量与关闭逻辑
        const closeSubscription = modalDynamicComponent.instance.closeEvent.subscribe(() => {
            this.close(modalDynamicComponent, componentRef);
            closeSubscription.unsubscribe(); // 取消订阅避免内存泄漏
        });
        modalDynamicComponent.instance.title = options?.title;
        modalDynamicComponent.instance.width = options?.width;
        modalDynamicComponent.instance.height = options?.height;

        // 关键：通过模态框的ViewContainerRef创建内部组件，自动关联变更检测
        const componentFactory = this.resolver.resolveComponentFactory(component);
        const componentRef = modalDynamicComponent.instance.contentViewRef.createComponent(componentFactory);

        // 触发模态框组件的变更检测
        modalDynamicComponent.changeDetectorRef.detectChanges();

        // 将模态框添加到页面
        this.document.body.appendChild(modalDynamicComponent.location.nativeElement);

        // 记录活跃组件引用
        this.activeModalComponents.push({modal: modalDynamicComponent, content: componentRef});

        this.modalNotifier = new Subject();
        return this.modalNotifier.asObservable();

    }

    close(modalComponent?: any, contentComponent?: any) {
        // 销毁动态组件
        modalComponent?.destroy();
        contentComponent?.destroy();
        // 清理活跃组件列表
        this.activeModalComponents = this.activeModalComponents.filter(item => item.modal !== modalComponent);
        
        this.modalNotifier.next();
        this.modalNotifier.complete();
    }

}

关键修改说明 #

1. 关联变更检测上下文：
   不再单独创建组件后插入hostView，而是直接通过模态框组件的contentViewRef（ViewContainerRef实例）调用createComponent创建内部组件，组件会自动继承模态框的变更检测上下文，Angular能正常跟踪表单输入变更。

2. 内存泄漏处理：
   添加activeModalComponents数组存储活跃组件引用，关闭模态框时调用destroy()销毁组件，同时取消closeEvent订阅，彻底清理资源。

3. 移除冗余操作：
   移除原代码中内部组件创建后的手动detectChanges()调用，通过ViewContainerRef.createComponent创建的组件会自动触发变更检测。

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