时间戳

首页 > 解决方案 > 如何以角度禁用模态的父页面

css - 如何以角度禁用模态的父页面

问题描述

我在 Angular 4 中有一个模式窗口可以正常工作，但是如果用户点击背景/父页面，模式就会关闭。

我找到了一些解决方案，建议在打开模式时使用背景='静态'和键盘=假，但我们的模式使用带有 BehaviorSubject 对象的本地 Dialog 类，因此使用 .next 方法打开。我也尝试使用 div config 设置这些属性，但无济于事。

因此，我正在寻找另一种解决方案，可能使用 CSS 或其他可以直接应用于父页面或模态 HTML 的设置/属性。

请参阅下面的一些相关代码。

对话框.component.ts：

constructor(private location: PlatformLocation,
    private _dialog: DialogService,
    private router: Router) { }

open() {
    this.showDialog = true;
    const body = document.body;
    body.classList.add('cell-modal-open');
}

close() {
    this.dialog = undefined;
}

private handleDialog(d: Dialog) {
    if (!d) {
        this.close();
    } else if (d.template) {
        if (this.showDialog) {
            this.close();
        }
        this.dialog = d;
        this.open();
    }
}

ngOnInit() {
    this.subscription = this
        ._dialog
        .getDialog()
        .subscribe({
            next: (d) => { this.handleDialog(d); console.log('subscribed dialog') },
            error: (err) => this.handleDialogError(err)
        });
    this.initialiseRoutingEventListeners();
}

对话服务.ts

private d: Dialog = { template: null, size: DialogSizeEnum.XLarge };
private dialogSubject = new BehaviorSubject<Dialog>({ template: null, size: DialogSizeEnum.XLarge });

constructor() { }

showDialog(template: TemplateRef<any>, size = DialogSizeEnum.XLarge, requiresAction = false) {
    Object.assign(this.d, { template: template, size: size, requiresAction: requiresAction });
    if (this.d !== null) {
        this.dialogSubject.next(this.d);
    }
}

getDialog(): BehaviorSubject<Dialog> {
    return this.dialogSubject;
}

clear() {
    this.dialogSubject.next(null);
}

欢迎任何建议的方法！

标签： cssangular

解决方案

为 close() 方法添加了标志，并添加了条件以仅在 true 时设置为未定义（即来自有效位置）。

推荐阅读