Angular 5：如何将详情组件动态注入模态框实现最大化

嘿，我刚好在Angular项目里做过类似的动态组件模态框需求，完全适配你说的场景，给你一步步拆解实现方法：

1. 先创建通用的动态模态框容器组件 #

这个组件就是用来当“壳子”，专门承载你要动态注入的各种详情组件。

模板代码（dynamic-modal.component.html） #

<div class="modal-header">
  <h4 class="modal-title">{{ title }}</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <!-- 这里是动态组件的挂载容器 -->
  <div #componentContainer></div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

组件类代码（dynamic-modal.component.ts） #

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, Input, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dynamic-modal',
  templateUrl: './dynamic-modal.component.html'
})
export class DynamicModalComponent implements OnInit {
  @Input() componentType: any; // 要注入的目标组件类型
  @Input() componentData: any; // 传递给目标组件的输入数据
  @ViewChild('componentContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(
    public activeModal: NgbActiveModal,
    private resolver: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    this.loadTargetComponent();
  }

  private loadTargetComponent() {
    // 先清空容器，避免重复注入组件
    this.container.clear();
    // 根据组件类型创建工厂
    const factory = this.resolver.resolveComponentFactory(this.componentType);
    // 在容器中动态创建组件实例
    const componentRef = this.container.createComponent(factory);
    // 把输入数据传递给动态组件
    Object.assign(componentRef.instance, this.componentData);
    // 如果需要监听动态组件的输出事件，在这里订阅即可
    // 比如：componentRef.instance.someOutputEvent.subscribe(data => { /* 处理逻辑 */ });
  }
}

2. 封装模态框服务，简化调用逻辑 #

把打开动态模态框的逻辑封装成服务，这样各个详情组件调用起来更简洁：

import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { DynamicModalComponent } from './dynamic-modal.component';

@Injectable({ providedIn: 'root' })
export class DynamicModalService {
  constructor(private modalService: NgbModal) {}

  open(componentType: any, title: string, componentData: any = {}) {
    const modalRef = this.modalService.open(DynamicModalComponent, { size: 'lg' });
    // 给动态模态框容器传递参数
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.componentType = componentType;
    modalRef.componentInstance.componentData = componentData;
    return modalRef;
  }
}

3. 关键配置：将动态组件加入entryComponents #

在Angular 5中，动态创建的组件必须在模块的entryComponents数组里声明，否则Angular无法识别并编译它。比如在你的主模块中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { DynamicModalComponent } from './dynamic-modal.component';
// 导入你所有的详情组件
import { UserDetailComponent } from './user-detail.component';
import { OrderDetailComponent } from './order-detail.component';

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [
    AppComponent,
    DynamicModalComponent,
    UserDetailComponent,
    OrderDetailComponent
  ],
  entryComponents: [
    DynamicModalComponent,
    UserDetailComponent, // 必须添加到这里
    OrderDetailComponent  // 必须添加到这里
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. 在详情组件中调用服务实现最大化 #

比如在你的UserDetailComponent里，点击“最大化”按钮时触发模态框：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DynamicModalService } from './dynamic-modal.service';

@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html'
})
export class UserDetailComponent {
  @Input() userId: number;
  @Output() userUpdated = new EventEmitter<any>();

  constructor(private dynamicModalService: DynamicModalService) {}

  onMaximize() {
    // 打开动态模态框，传入当前组件类型和需要传递的数据
    const modalRef = this.dynamicModalService.open(
      UserDetailComponent,
      '用户详情',
      { userId: this.userId } // 把当前组件的输入数据传递给模态框内的组件
    );

    // 监听模态框内组件的输出事件（如果需要）
    modalRef.componentInstance.container.get(0).instance.userUpdated.subscribe(data => {
      this.userUpdated.emit(data);
      modalRef.close();
    });
  }
}

这样一来，不管你有多少个不同的详情组件，只要在点击最大化按钮时调用dynamicModalService.open()，传入对应的组件类型和数据，就能实现动态注入到模态框的效果，完美匹配你想要的<whatever-app-is-injected>需求。

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