无法使用 kendo PopupService 显示弹出窗口

Question

我们目前无法显示任何需要ui弹出服务的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 })

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

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

这是在我们应用程序的 boostrap 模块中完成的。首先，这似乎没有必要。 None 我们查看的 Kendo plunkers 具有这种或任何其他形式的特殊弹出注入逻辑。

但是，即使在尝试创建 kendo 弹出元素之后，我们现在在尝试查看弹出窗口时仍会遇到此错误：

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 升级模块来支持 Angular 1.5 和 Angular 4。并且可能弹出容器未正确生成或无法找到。

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

Answer 1

mentioned documentation 声明有效的 ElementRef 实例应该 returned。换句话说，您需要 return 一个将用作 Popup 容器的元素，仅此而已。考虑到这一点，代码应该尽可能简单：

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

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

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

注意 document.body 元素是如何 return 编辑为 Popup 容器的。

无法使用 kendo PopupService 显示弹出窗口

Unable to show a popup using kendo PopupService

kendo-ui-angular2

angular