Kendo Dialog 的 Angular 服务引发错误答案

【问题标题】：Angular Service for Kendo Dialog throws an errorKendo Dialog 的 Angular 服务引发错误
【发布时间】：2020-10-02 09:18:46
【问题描述】：

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

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

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 指令。

仪表板.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);
  }
});

}

知道哪里出错了吗？

提前致谢。

【问题讨论】：

标签： angular kendo-ui dialog angular-route-guards

【解决方案1】：

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

【讨论】：