能否在Angular Material 4/5/6的BottomSheet中打开组件实例？

好问题！默认情况下Angular CDK的BottomSheet确实只会创建组件/模板的新实例，没法直接复用已存在的组件实例，但咱们可以通过手动挂载的方式来实现这个需求，结合你使用的Angular 5 + CDK 6版本，具体步骤如下：

方案一：通过空容器组件手动挂载已有实例 #

这个思路是用一个空组件作为BottomSheet的内容载体，然后在BottomSheet打开后，把你已有的组件实例插入到这个容器中：

1. 创建空容器组件
   先新建一个没有任何默认内容的组件，比如BottomSheetHostComponent，它只需要提供一个ViewContainerRef供我们挂载实例：

   import { Component, ViewContainerRef } from '@angular/core';
   
   @Component({
     template: ''
   })
   export class BottomSheetHostComponent {
     constructor(public viewContainerRef: ViewContainerRef) {}
   }
   

   记得把这个组件添加到你的模块declarations和entryComponents里（Angular 5中动态组件需要配置entryComponents）。

2. 打开BottomSheet并挂载已有实例
   在你需要打开BottomSheet的地方，先获取到已有的组件实例（假设你已经通过ViewChild或者其他方式拿到了existingComponentInstance），然后执行以下操作：

   import { MatBottomSheet } from '@angular/cdk/bottom-sheet';
   import { BottomSheetHostComponent } from './bottom-sheet-host.component';
   
   // ...
   
   constructor(private bottomSheet: MatBottomSheet) {}
   
   openExistingInstanceInBottomSheet() {
     const bottomSheetRef = this.bottomSheet.open(BottomSheetHostComponent);
     
     bottomSheetRef.afterOpened().subscribe(() => {
       // 获取容器组件的ViewContainerRef
       const hostViewContainer = bottomSheetRef.instance.viewContainerRef;
       // 把已有组件实例挂载到容器中
       hostViewContainer.insert(this.existingComponentInstance.hostView);
     });
   
     // 记得在BottomSheet关闭时分离实例，避免内存泄漏
     bottomSheetRef.afterDismissed().subscribe(() => {
       const hostViewContainer = bottomSheetRef.instance.viewContainerRef;
       hostViewContainer.detach();
     });
   }
   

方案二：利用模板引用传递实例（需注意生命周期） #

如果你不想额外创建容器组件，也可以用模板作为BottomSheet的内容，然后把已有实例注入到模板上下文里：

1. 在组件模板中定义BottomSheet模板

   <ng-template #bottomSheetTemplate let-instance="instance">
     <ng-container *ngComponentOutlet="instance"></ng-container>
   </ng-template>
   

2. 打开BottomSheet时传入已有实例

   import { MatBottomSheet } from '@angular/cdk/bottom-sheet';
   import { TemplateRef, ViewChild } from '@angular/core';
   
   // ...
   
   @ViewChild('bottomSheetTemplate') bottomSheetTemplate!: TemplateRef<any>;
   existingComponentInstance: YourExistingComponentType; // 你的已有组件实例
   
   openWithTemplate() {
     const bottomSheetRef = this.bottomSheet.open(this.bottomSheetTemplate, {
       data: { instance: this.existingComponentInstance }
     });
   
     // 同样要在关闭时处理实例，避免被BottomSheet销毁
     bottomSheetRef.afterDismissed().subscribe(() => {
       // 这里可以根据需要把实例重新挂载回原来的位置
     });
   }
   

关键注意事项 #

• 内存泄漏防范：一定要在BottomSheet关闭时手动分离已有组件实例，不然实例可能会被BottomSheet的销毁逻辑影响，导致内存泄漏。
• 生命周期影响：默认情况下，BottomSheet关闭时会销毁其内部的内容视图，所以如果你想保留已有实例，必须确保它不会被BottomSheet的销毁流程波及，手动分离是最稳妥的方式。
• 版本兼容：以上代码适配Angular 5和CDK 6的API，如果你后续升级版本，可能需要调整MatBottomSheet的相关方法调用。

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