Question

我们目前无法显示任何需要弹出服务的kendo ui控件，我们正在尝试使用的两个是kendo-combobox和kendo-datepicker。

我们尝试在代码中编写kendo示例，但仍然会遇到相同的错误。

错误是：

未找到查看容器！注入POPUP_CONTAINER或通过appendTo选项定义特定的ViewContainerRef。有关详细信息，请参阅http://www.telerik.com/kendo-angular-ui/components/popup/api/POPUP_CONTAINER。

这是我们尝试展开组合框时遇到的错误，或者我们手动尝试调用的错误：

this.popupService.open({ content: this.dialog })

上面的链接不是很有帮助，但我们尽力实现它。

providers: [{
        provide: POPUP_CONTAINER,
        useFactory: () =>
        {
            return document.body.appendChild(document.createElement("kendo-popup"));
            //return the container ElementRef, where the popup will be injected
        }
    }]

这是在我们的应用程序的boostrap模块中完成的。首先，似乎这不应该是必要的。我们看过的剑道掠夺者都没有这种或任何其他形式的特殊弹出注入逻辑。

但是，即使在尝试创建了一个kendo popup元素之后，我们现在在尝试查看弹出窗口时出现此错误：

ERROR TypeError: Cannot read property 'appendChild' of undefined
    at PopupService.appendPopup (:2295/node_modules/@progress/kendo-angular-popup/dist/npm/popup.service.js:163)
    at PopupService.open (:2295/node_modules/@progress/kendo-angular-popup/dist/npm/popup.service.js:130)
    at PropertySelectorComponent.togglePopup (:2295/app/Upgrade/common/property-selector/property-selector.component.js:41)
    at Object.eval [as handleEvent] (ng:///my_Company_CommonModule/PropertySelectorComponent.ngfactory.js:24)
    at handleEvent (:2295/node_modules/@angular/core/bundles/core.umd.js:12029)
    at callWithDebugContext (:2295/node_modules/@angular/core/bundles/core.umd.js:13490)
    at Object.debugHandleEvent [as handleEvent] (:2295/node_modules/@angular/core/bundles/core.umd.js:13078)
    at dispatchEvent (:2295/node_modules/@angular/core/bundles/core.umd.js:8633)
    at eval (:2295/node_modules/@angular/core/bundles/core.umd.js:9244)
    at HTMLButtonElement.eval (:2295/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2685)

此时我能想到的唯一一点就是我们使用角度升级模块来支持Angular 1.5和Angular 4.并且弹出容器可能无法正确生成或无法找到。

有关下一步尝试的任何建议，以便只使用kendo显示一个组合框。

Answer 1

mentioned documentation表示应返回有效的ElementRef实例。换句话说，您需要返回一个将用作Popup容器的元素，仅此而已。考虑到这一点，代码应该简单：

useFactory: () => ({ nativeElement: document.body } as ElementRef)

这是一个演示此方法的可运行演示：

http://plnkr.co/edit/GOa7SjoWiKiYXvZTMTtL?p=preview

注意document.body元素如何作为弹出容器返回。

无法使用kendo PopupService

1 个答案: