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

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

2 голосов
/ 17 октября 2019

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

verify.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<boolean> {
        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 =>
                options.errorOnClose
                    ? throwError(err || "not confirmed")
                    : EMPTY
            )
        );
    }
}

Подтверждение. 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 {}

verify.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);
    }
}

verify.modal.component.html 

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

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

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

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

...