如何为ngx-modal的.modal-dialog类div应用Angular拖拽指令？

Hey there! Let’s work through two practical solutions to get your drag directive attached to the .modal-dialog element with ngx-modal—since the library’s automatic wrapping is getting in the way of your template control.

Solution 1: Attach the Directive to .modal-dialog After Render #

Since ngx-modal handles the outer .modal-content > .modal-dialog structure automatically, we can target that element post-render and attach your directive manually, or adjust the directive to auto-target the class.

Option A: Manual Attachment via Modal Lifecycle Hooks #

Use the modal’s opened event to query the .modal-dialog element and instantiate your directive on it:

1. First, ensure your drag directive is declared and exported in a module that’s imported wherever you use modals (e.g., a SharedModule), or mark it as standalone: true (Angular 14+).
2. Hook into the modal’s onOpened event to access the element:

import { Component, Injector } from '@angular/core';
import { ModalService } from 'ngx-modal'; // Adjust import to match your library
import { DragDirective } from './drag.directive';

export class YourComponent {
  constructor(private modalService: ModalService, private injector: Injector) {}

  openDraggableModal() {
    const modalRef = this.modalService.open(YourModalContentComponent);
    
    // Wait for modal to fully render
    modalRef.onOpened.subscribe(() => {
      const modalDialog = modalRef.nativeElement.querySelector('.modal-dialog');
      
      if (modalDialog) {
        // Manually create and initialize the directive
        const dragDirective = DragDirective.create(modalDialog, this.injector);
        dragDirective.ngOnInit();
      }
    });
  }
}

Note: The way to access the modal’s native element may vary by library—check your ngx-modal docs for properties like contentView or elementRef.

Option B: Auto-Target .modal-dialog with Directive Selector #

Modify your drag directive to automatically attach to any element with the .modal-dialog class:

import { Directive } from '@angular/core';

@Directive({
  selector: '.modal-dialog', // Targets all elements with this class
  standalone: true // Use if you're on Angular 14+
})
export class DragDirective {
  // Your existing drag logic (mouse down/move/up handlers) here
}

Just ensure this directive is imported in your root module or a shared module that’s included in every module where modals are used. It will now attach itself to any .modal-dialog element ngx-modal renders.

Solution 2: Define a Full Custom Modal Template (If Supported) #

If your ngx-modal library allows overriding the default template structure, you can create a complete modal component that includes the .modal-dialog element (and apply your directive directly to it):

1. Create a custom modal component:

<!-- custom-draggable-modal.component.html -->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" appDrag> <!-- Apply your drag directive here -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ modalTitle }}</h5>
        <button type="button" class="close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ng-content></ng-content> <!-- Project your modal content here -->
      </div>
      <div class="modal-footer">
        <ng-content select="[modal-footer]"></ng-content> <!-- Project footer content -->
      </div>
    </div>
  </div>
</div>

2. Open this custom component instead of the default modal:

openCustomModal() {
  this.modalService.open(CustomDraggableModalComponent, {
    data: { modalTitle: 'My Draggable Modal' }
  });
}

Important: Verify your ngx-modal library’s docs to confirm if it supports full template overrides. If not, Solution 1 is your reliable fallback.

Quick Fix for Module Recognition Issues #

If your directive isn’t being recognized:

• For pre-Angular 14: Declare and export the directive in a SharedModule, then import that module into any feature module using modals.
• For Angular 14+: Mark the directive as standalone: true and import it directly into your component or root module.

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