Angular 9动态组件切换时如何保留输入状态？（实现类似Vue keep-alive指令的功能）

当然可以实现！Angular里虽然没有Vue那种开箱即用的keep-alive指令，但针对你用ComponentFactoryResolver动态渲染组件的场景，我们可以通过缓存组件实例而非销毁重建的方式，完美复刻状态保留的效果。

问题分析 #

你当前的createComponent方法里，每次切换组件都会调用viewContainerRef.clear()——这个方法会直接销毁当前组件实例，导致输入状态全部丢失。我们的核心改进思路就是：把已经创建过的组件实例存起来，切换时只做视图的显示/隐藏，而非销毁。

具体实现步骤 #

1. 添加组件缓存容器
   在你的宿主组件类中，定义一个Map来缓存已创建的组件引用和对应的视图引用：

   private componentCache = new Map<number, { componentRef: ComponentRef<any>, viewRef: ViewRef }>();
   

2. 修改createComponent方法
   调整逻辑，优先从缓存取组件，没有才创建新的，同时移除会销毁组件的clear()调用（仅清空视图容器而非销毁实例）：

   public createComponent(component: number): void { 
     const currentComponent = this.components[component]; 
     const viewContainerRef = this.adHost.viewContainerRef; 
   
     // 先检查缓存中是否已有该组件实例
     if (this.componentCache.has(component)) {
       // 清空当前视图容器（不销毁组件）
       viewContainerRef.clear();
       // 将缓存的视图重新插入容器，恢复组件显示
       const cachedItem = this.componentCache.get(component)!;
       viewContainerRef.insert(cachedItem.viewRef);
       return;
     }
   
     // 缓存中无对应组件，创建新实例
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
       currentComponent as any 
     ); 
     const componentRef = viewContainerRef.createComponent(componentFactory); 
     // 将组件实例和视图引用存入缓存
     this.componentCache.set(component, {
       componentRef,
       viewRef: componentRef.hostView
     });
   
     // 保留你原有的事件订阅逻辑
     componentRef.instance.outputEventData.subscribe((val: Object | any) => { 
       if (val) { 
         this.sendFilter.emit(val); 
       } 
     }); 
   
     // 处理组件销毁逻辑时，记得从缓存中移除
     componentRef.instance.destroyComponent.subscribe((val: any) => { 
       if (val) { 
         this.componentCache.delete(component);
         componentRef.destroy(); // 手动销毁组件实例
         viewContainerRef.clear(); 
       } 
     }); 
   }
   

关键逻辑说明 #

• 首次创建组件时，我们把组件的componentRef（实例引用）和hostView（视图引用）存入缓存；
• 切换到其他组件时，viewContainerRef.clear()只会移除视图，但组件实例依然存活在缓存中；
• 切回原组件时，直接把缓存的视图重新插入容器，组件的所有状态（比如输入框的内容）都会完整保留。

注意事项 #

• 内存管理：如果你的应用中有大量动态组件，记得在确定不再使用某个组件时，调用componentRef.destroy()并从缓存中删除，避免内存泄漏；
• 生命周期钩子：这种方式下，组件切换不会触发ngOnDestroy（因为实例没被销毁），如果需要在切换时执行特定逻辑，可以给组件定义自定义钩子（比如onDeactivate/onActivate），在切换时手动调用。

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