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

Question

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

我发现了一些建议在打开模式时使用 backdrop='static' 和 keyboard=false 的解决方案，但我们的模式使用带有 BehaviorSubject 对象的本地 Dialog 类，因此使用 .next 方法打开。我也尝试使用 div 配置设置这些属性，但无济于事。

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

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

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

欢迎任何建议的方法!

Answer 1

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