Как сделать NgbModal перетаскиваемым с помощью @ angular / cdk

Как сделать NgbModal перетаскиваемым с помощью @ angular / cdk

У меня есть некоторые трудности с выяснением, как сделать мои модалы перетаскиваемыми. У меня есть многоразовые модалы с собственным сервисом, который призван создать один внутри компонентов.

confirm.modal.service.ts

 import { Injectable } from "@angular/core"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { Observable, from, EMPTY, throwError } from "rxjs"; import { catchError, tap } from "rxjs/operators"; import { ConfirmModalComponent } from "./confirm-modal.component"; export interface ConfirmOptions { title: string; subtitle?: string; errorOnClose?: boolean; } @Injectable({ providedIn: "root" }) export class ConfirmModalService { constructor(private modalService: NgbModal) {} confirm(options: ConfirmOptions): Observable{amp}lt;boolean{amp}gt; { const modalRef = this.modalService.open(ConfirmModalComponent, { centered: true }); modalRef.componentInstance.title = options.title || "Are you sure?"; modalRef.componentInstance.subtitle = options.subtitle || null; return from(modalRef.result).pipe( tap(), catchError(err ={amp}gt; options.errorOnClose ? throwError(err || "not confirmed") : EMPTY ) ); } } 

confirm.modal.module.ts

 import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { DragDropModule } from "@angular/cdk/drag-drop"; import { ConfirmModalComponent } from "./confirm-modal.component"; @NgModule({ imports: [ CommonModule, DragDropModule ], declarations: [ConfirmModalComponent], exports: [ConfirmModalComponent] }) export class ConfirmModalModule {} 

confirm.modal.component.ts

 import { Component, Input } from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; @Component({ selector: "app-confirm-modal", templateUrl: "./confirm-modal.component.html", styleUrls: ["./confirm-modal.component.scss"] }) export class ConfirmModalComponent { @Input() title: string; @Input() subtitle: string; constructor(public activeModal: NgbActiveModal) {} public accept(): void { this.activeModal.close(true); } public dismiss(): void { this.activeModal.close(false); } } 

confirm.modal.component.html

 {amp}lt;div class="modal-body"{amp}gt; {amp}lt;div class="modal-body__header"{amp}gt; {amp}lt;span{amp}gt;{{ title }}{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div *ngIf="subtitle" class="modal-body__text"{amp}gt; {amp}lt;span{amp}gt;{{ subtitle }}{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-body__button-row"{amp}gt; {amp}lt;button class="btn btn-primary" (click)="accept()"{amp}gt;Yes{amp}lt;/button{amp}gt; {amp}lt;button class="btn btn-light" (click)="dismiss()"{amp}gt;Cancel{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Поэтому я хочу, чтобы весь модал можно было перетаскивать с помощью встроенного в Angular DragDropModule , поэтому я должен добавить cdkDrag внутри элемента с class='modal-content' но я не знаю, как этого добиться с помощью текущей настройки. NgbModalOptions предоставляет функциональность для добавления только класса, но не директивы атрибута. Я знаю, что с JQuery draggable есть более простое решение, но я бы хотел этого избежать.

Я думал об использовании @ViewChildren для каждой страницы, но это не лучшее решение для меня.

Спасибо за любую помощь!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector