Question

我尝试使用Kendo UI DialogService在对话框中调用我自己的组件。我遇到的问题是在我的对话框中使用自定义操作。

包含带有自定义按钮和操作的ng-template有点失败了使用dialogService的目的，并使我的模板与标记混淆，而标记与它没有直接关系。

我尝试过使用这样的代码：

const saveAction = { text: 'Save', primary: true };
const cancelAction = { text: 'Cancel' };

const dialog = this.dialogService.open({
  title: 'Edit data',
  content: FormComponent,
  actions: [
    cancelAction,
    saveAction
  ]
});
const form = dialog.content.instance;
form.data = data;

dialog.result.subscribe((result) => {
  if (result === saveAction) {
    form.save();
  }
});

这将让我从我的FormComponent运行一个保存功能，但如果表单验证关闭或保存失败，我将不允许我停止关闭对话框。

Answer 1

通过获取对话框动作事件发射器的副本并将其替换为我自己的副本，我已设法阻止对话框关闭。这是解决方案的黑客解决方案。希望剑道将来会提供更好的东西。

const saveAction = { text: 'Save', primary: true };
const cancelAction = { text: 'Cancel' };

const dialog = this.dialogService.open({
    title: 'Edit data',
    content: FormComponent,
    actions: [
        cancelAction,
        saveAction
    ]
});
const form = dialog.content.instance;
form.data = data;

const actionEmitter = dialog.dialog.instance.action;
dialog.dialog.instance.action = new EventEmitter<any>();
const sub = dialog.dialog.instance.action.subscribe(action => {
    // Perform any check here based on whether you want the dialog to close or not
    if(form.validate()) {
        // Only call this if you want the dialog to close
        actionEmitter.emit(action);
    }
});

dialog.result.subscribe((result) => {
    sub.unsubscribe(); // clean up
    if (result === saveAction) {
        form.save();
    }
});

Answer 2

您可以使用方法'setOptions'，但我不知道为什么该方法在Telerik Document：https://docs.telerik.com/kendo-ui/api/javascript/ui/dialog

中不存在

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>Untitled</title>

        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css">

        <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/angular.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>

<body>
        <div id="dialog"></div>
        <input type="button" value="show dialog" onclick="showDialog()" />
        <script>
                $("#dialog").kendoDialog({
                        visible: false,
                        content: 'first content',
                        actions: [{
                                text: "OK",
                                action: function (e) {
                                        return false;
                                },
                                primary: true
                        }, {
                                text: "Cancel"
                        }]
                });

                function showDialog() {
                        var dialog = $("#dialog").data("kendoDialog");
                        dialog.setOptions({
                                closable: false,
                                content: 're-open content',
                                actions: [{
                                                text: 'test1',
                                                primary: true
                                        },
                                        {
                                                text: 'test2'
                                        }
                                ]
                        });

                        dialog.open();
                        console.log(dialog.options.actions)
                }
        </script>
</body>

</html>

如何将回调添加到kendo对话框操作

2 个答案: