Angular 5 ng-bootstrap模态框动态切换templateURL实现方案

嘿，我来帮你搞定这个动态切换模态框模板的需求！结合你给出的代码片段，咱们分两种实用方案来实现，你可以根据自己的场景选择：

方案一：预定义模板组件（推荐，类型安全+性能稳定） #

这种方式适合你已经提前知道要用到哪些模板的场景，每个模板对应一个独立的组件，通过服务根据传入的名称切换打开。

步骤1：创建对应模板的模态框组件 #

先给每个模板写一个专属的组件，比如默认模板和用户模板：

// 默认模板组件
import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  templateUrl: './default-modal.template.html' // 你的默认模板路径
})
export class DefaultModalComponent {
  constructor(public activeModal: NgbActiveModal) {}
  // 这里可以加模板需要的业务逻辑
}

// 用户模板组件
import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  templateUrl: './user-modal.template.html' // 你的用户模板路径
})
export class UserModalComponent {
  constructor(public activeModal: NgbActiveModal) {}
  // 用户模板对应的业务逻辑
}

步骤2：改造你的ModalService，添加动态切换逻辑 #

在你的模态框服务里，新增一个方法，根据传入的模板名称匹配对应的组件：

import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { DefaultModalComponent } from './default-modal.component';
import { UserModalComponent } from './user-modal.component';

@Injectable({ providedIn: 'root' })
export class ModalService {
  constructor(private ngbModal: NgbModal) {}

  // 传入模板名称，打开对应模态框
  openModal(templateName: string) {
    let targetComponent;
    switch(templateName) {
      case 'user':
        targetComponent = UserModalComponent;
        break;
      // 可以继续加更多模板的case
      default:
        targetComponent = DefaultModalComponent;
    }
    // 返回模态框引用，方便后续操作（比如传数据、监听关闭）
    return this.ngbModal.open(targetComponent, { size: 'lg' });
  }
}

步骤3：在父组件中调用切换 #

在需要触发模态框的组件里，调用服务方法即可切换模板：

import { Component } from '@angular/core';
import { ModalService } from './../../services/modal.service';

@Component({
  selector: 'app-your-component',
  template: `
    <button (click)="openDefaultModal()">打开默认模板</button>
    <button (click)="openUserModal()">打开用户模板</button>
  `
})
export class YourComponent {
  constructor(private modalService: ModalService) {}

  openDefaultModal() {
    const modalRef = this.modalService.openModal('default');
    // 如果需要给模态框传数据，可以这样：
    // modalRef.componentInstance.data = { key: value };
  }

  openUserModal() {
    this.modalService.openModal('user');
  }
}

关键配置 #

别忘了在你的根模块（比如AppModule）里声明这些组件，并加入entryComponents（Angular 5中动态加载的组件必须在这里声明）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { DefaultModalComponent } from './default-modal.component';
import { UserModalComponent } from './user-modal.component';
import { YourComponent } from './your.component';

@NgModule({
  imports: [BrowserModule, NgbModule.forRoot()],
  declarations: [YourComponent, DefaultModalComponent, UserModalComponent],
  entryComponents: [DefaultModalComponent, UserModalComponent],
  bootstrap: [YourComponent]
})
export class AppModule {}

方案二：动态编译模板（适合完全动态场景） #

如果你的模板路径是动态生成的（比如从后端获取），可以用这种方式动态编译模板组件。注意：Angular 5的AOT编译模式下需要额外配置，且存在安全风险，仅在可信模板场景下使用

步骤1：创建动态模态框宿主组件 #

这个组件负责接收模板路径，动态编译并渲染模板：

import { Component, Input, OnInit, Compiler, ViewContainerRef, Injector } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { DomSanitizer } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

@Component({
  template: `<div #modalContainer></div>`
})
export class DynamicModalComponent implements OnInit {
  @Input() templateUrl: string;
  @ViewChild('modalContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(
    public activeModal: NgbActiveModal,
    private compiler: Compiler,
    private injector: Injector,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    // 创建动态组件，绑定传入的模板路径
    const dynamicTemplateComponent = Component({
      templateUrl: this.sanitizer.bypassSecurityTrustResourceUrl(this.templateUrl),
      imports: [CommonModule] // 如果模板用到*ngIf/*ngFor等，必须导入这个
    })(class {});

    // 编译动态模块和组件
    this.compiler.compileModuleAndAllComponentsAsync(
      class {
        static declarations = [dynamicTemplateComponent];
        static imports = [CommonModule];
      }
    ).then(moduleFactory => {
      const componentFactory = moduleFactory.componentFactories.find(
        f => f.componentType === dynamicTemplateComponent
      );
      // 在容器中渲染动态组件
      this.container.createComponent(componentFactory, 0, this.injector);
    });
  }
}

步骤2：修改ModalService支持动态模板 #

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

@Injectable({ providedIn: 'root' })
export class ModalService {
  constructor(private ngbModal: NgbModal) {}

  // 传入模板路径打开动态模态框
  openDynamicModal(templateUrl: string) {
    const modalRef = this.ngbModal.open(DynamicModalComponent);
    modalRef.componentInstance.templateUrl = templateUrl;
    return modalRef;
  }
}

步骤3：调用动态模态框 #

// 在父组件中
openCustomModal() {
  // 直接传入模板路径即可
  this.modalService.openDynamicModal('./custom-modal.template.html');
}

注意事项 #

• 如果使用AOT编译，需要在angular.json中把aot设为false，或者额外配置JIT编译支持；
• 确保模板路径是可信的，避免XSS风险；
• 同样要把DynamicModalComponent加入根模块的declarations和entryComponents。

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