我在弄清楚如何使我的模态可拖动时遇到了一些困难。我有可重用的模态,它有自己的服务,被称为创建一个内部组件。
确认.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 {}
确认.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);
}
}
确认.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>
所以我想让整个模态可以用Angular built-in DragDropModule拖动。 ,因此我应该添加
cdkDrag
带有 class='modal-content'
的内部元素但我不知道如何通过当前设置实现这一目标。 NgbModalOptions提供仅添加类而不是属性指令的功能。我知道 JQuery 可拖动有更简单的解决方案,但我想避免这种情况。
我在考虑使用 @ViewChildren对于每一页,但对我来说似乎不是最好的解决方案。
谢谢你的帮助!
最佳答案
只需将您的模式包装在一个容器中,然后按照 documentation 将 cdkDragRootElement 添加到其中.当您从 component.ts 打开对话框时,您还必须将此类添加为选项。
<ng-template #content
let-modal>
<div
cdkDrag
cdkDragRootElement=".your-custom-dialog-class">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</ng-template>
component.ts 的代码const options: NgbModalOptions = {
windowClass: 'your-custom-dialog-class'
};
this.modalService.open(this.content, options);
关于javascript - 如何使用 @angular/cdk 使 NgbModal 可拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58435533/