如何为剑道对话动作添加回调答案

【问题标题】：how to add callbacks to kendo dialog actions如何为剑道对话动作添加回调
【发布时间】：2017-07-04 19:43:05
【问题描述】：

我尝试使用 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 运行保存功能，但如果表单验证关闭或保存失败，我将无法阻止对话框关闭。

【问题讨论】：

标签： kendo-ui-angular2

【解决方案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();
    }
});

【讨论】：

【解决方案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>

【讨论】：