Angular Kendo 对话框的服务抛出错误

Question

如果用户试图在不保存表单的情况下导航出页面，我需要通过 CanDeactivate routeguard 触发一个对话框。我遵循建议的解决方案 here.

我想自定义示例中使用的确认对话框，使用我们在整个应用程序中使用的自定义模式对话框。我打算使用 Kendo Dialog Service 来完成。我在我的应用程序中的一个现有组件上使用 link 中给出的完全相同的示例，但它抛出了以下控制台错误：

Cannot attach dialog to the page.
Add an element that uses the kendoDialogContainer directive, or set the 'appendTo' property.
See https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/.          
at DialogService.push../node_modules/@progress/kendo-angular-dialog/dist/fesm5/index.js.DialogService.open (index.js:770)
at DashboardLandingComponent.push../src/app/dashboard/dashboard-landing/dashboard-landing.component.ts.DashboardLandingComponent.open (dashboard-landing.component.ts:27)
at Object.handleEvent (dashboard-landing.component.html:52)
at handleEvent (core.js:30650)
at callWithDebugContext (core.js:31720)
at Object.debugHandleEvent [as handleEvent] (core.js:31447)
at dispatchEvent (core.js:21246)
at core.js:29859
at HTMLButtonElement.<anonymous> (platform-browser.js:554)
at ZoneDelegate.invokeTask (zone.js:431)

奇怪的是我在页面上添加了 kendoDialogContainer 指令。

Dashboard.html:

 <button kendoButton (click)="open()">Harmless button</button>
  <div kendoDialogContainer></div>

Dashboard.component.ts:

import { DialogCloseResult, DialogService } from '@progress/kendo-angular-dialog';

public open() {
var dialog = this.dialogService.open({
  title: "Please confirm",
  content: "Are you sure?",
  actions: [
    { text: "No" },
    { text: "Yes", primary: true }
  ]
});

dialog.result.subscribe((result) => {
  if (result instanceof DialogCloseResult) {
    console.log("close");
  } else {
    console.log("action", result);
  }
});

}

知道哪里出了问题吗？

提前致谢。

Answer 1

kendoDialogContainer div 需要在 app/app.component.html 中。有同样的问题，这解决了它。

Angular Kendo 对话框的服务抛出错误

Angular Service for Kendo Dialog throws an error

dialog

kendo-ui

angular

angular-route-guards