如何在Angular CDK Portal中向动态创建的滑出侧边栏插入组件

刚好做过类似的Angular动态组件嵌入需求，我来一步步帮你搞定这个滑出菜单的问题！核心是利用Angular的动态组件加载API（ViewContainerRef、ComponentFactoryResolver）完成组件的动态创建与挂载，具体步骤如下：

1. 为Sidebar准备动态组件容器 #

首先在SidebarComponent的模板里添加一个专门用来承载动态组件的容器，我们会用@ViewChild来获取它的ViewContainerRef实例（这是Angular挂载动态组件的核心容器）：

<!-- sidebar.component.html -->
<div class="sidebar">
  <!-- 动态组件挂载容器 -->
  <div #contentContainer></div>
</div>

2. 在SidebarComponent中实现组件加载逻辑 #

在SidebarComponent的TS文件中，注入ComponentFactoryResolver，并编写方法接收外部传入的组件类型，完成动态组件的创建与挂载：

// sidebar.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  // 获取容器的ViewContainerRef实例
  @ViewChild('contentContainer', { read: ViewContainerRef }) contentContainer!: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  // 加载传入的动态组件
  loadComponent(componentType: any) {
    // 先清空容器，避免重复挂载组件
    this.contentContainer.clear();
    // 根据组件类型创建对应的组件工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
    // 在容器中创建组件实例并挂载
    const componentRef = this.contentContainer.createComponent(componentFactory);
    
    // 可选：如果需要给动态组件传递数据，可在这里设置实例属性
    // 比如：componentRef.instance.someData = "侧边栏内容数据";
  }
}

3. 修改SidebarService，传递组件类型并触发加载 #

更新SidebarService的open方法，让它在创建SidebarComponent实例后，调用其loadComponent方法，把传入的目标组件传递进去：

// sidebar.service.ts
import { Injectable, ApplicationRef, ComponentFactoryResolver, Injector } from '@angular/core';
import { SidebarComponent } from './sidebar/sidebar.component';

@Injectable({
  providedIn: 'root'
})
export class SidebarService {
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {}

  open(componentType: any) {
    // 创建SidebarComponent的组件工厂
    const sidebarFactory = this.componentFactoryResolver.resolveComponentFactory(SidebarComponent);
    // 创建Sidebar组件实例
    const sidebarRef = sidebarFactory.create(this.injector);
    
    // 将Sidebar组件附加到Angular应用的视图树中
    this.appRef.attachView(sidebarRef.hostView);
    // 获取Sidebar的DOM元素并添加到页面body中
    const domElem = (sidebarRef.hostView as any).rootNodes[0] as HTMLElement;
    document.body.appendChild(domElem);

    // 关键步骤：调用Sidebar的方法，传入要嵌入的目标组件
    sidebarRef.instance.loadComponent(componentType);

    // 可选：添加点击外部区域关闭侧边栏的逻辑
    const closeHandler = (event: MouseEvent) => {
      if (!domElem.contains(event.target as Node)) {
        this.close(sidebarRef);
        document.removeEventListener('click', closeHandler);
      }
    };
    // 用setTimeout确保事件监听在组件渲染完成后生效
    setTimeout(() => document.addEventListener('click', closeHandler));
  }

  // 关闭并销毁侧边栏组件的方法
  close(sidebarRef: any) {
    this.appRef.detachView(sidebarRef.hostView);
    sidebarRef.destroy();
  }
}

4. 模块配置（兼容旧版Angular） #

如果你的Angular版本是8及以下，需要在模块的entryComponents数组中声明动态加载的组件（Angular 9+启用Ivy编译后无需此步骤）：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { ContentComponent } from './content/content.component'; // 你的内容组件

@NgModule({
  declarations: [
    AppComponent,
    SidebarComponent,
    ContentComponent
  ],
  imports: [BrowserModule],
  // Angular 8及以下需要配置entryComponents
  entryComponents: [SidebarComponent, ContentComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 测试调用 #

现在你就可以在任意组件中调用this.sidebarService.open(ContentComponent)，就能看到ContentComponent被成功嵌入到滑出的侧边栏里啦！

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