让 Kendo UI、DataViz Map 和 Angular 2 协同工作

Question

我正在一个项目中使用Kendo UI和Angular 2，但似乎无法让地图小部件与Angular 2中的shapefile一起使用。

看起来我必须与jQuery集成，因为地图组件尚未列为Angular 2组件。 因此，我按照此处概述的说明进行操作。但是，它似乎仍然不起作用。这是我目前拥有的：

exampe.module.ts

...
import "@progress/kendo-ui";
...

示例地图.html

<div #kendoMap style="height: 1000px;">
</div>

example-map.component.ts：

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
declare var kendo: any;
@Component({
  selector: 'example-map',
  templateUrl: './example-map.html'
})
export class ExampleComponent implements AfterViewInit, OnDestroy {
  @ViewChild('kendoMap')
  kendoMap: ElementRef;
  constructor () { }
  ngAfterViewInit() {
    const element = kendo.jQuery(this.kendoMap.nativeElement);
    // This line throws an error
    element.kendoMap({
        controls: {
            attribution: false,
            navigator: false,
            zoom: false
        },
        zoom: 7,
        center: [32.7767, 96.7970],
        layers: [
            {
                type: 'tile',
                zIndex: -1,
                urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
            },
            {
                type: 'shape',
                style: { fill: { opacity: 0.7 } }
                // shapefile layer data will be added here later by ajax
            }
        ],
        markers: []
    });
  }
  ngOnDestroy() { kendo.destroy(this.kendoMap.nativeElement); }
}

这引发了一个错误：

TypeError: Function has non-object prototype 'undefined' in instanceof check .

为了解决这个问题，我在我的索引.html文件中包含了他们使用的jQuery版本：

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

但是现在它正在谈论访问未定义的东西的"宽度"。

ExampleComponent.html ERROR TypeError: Cannot read property 'width' of undefined
    at init.translate (http://localhost:3000/vendor.bundle.js:89908:98)
    at init.translate (http://localhost:3000/vendor.bundle.js:262525:25)
    at init._translateSurface (http://localhost:3000/vendor.bundle.js:224872:31)
    at init._reset (http://localhost:3000/vendor.bundle.js:224758:19)
    at init.proxy (http://localhost:3000/vendor.bundle.js:52589:13)
    at init.trigger (http://localhost:3000/vendor.bundle.js:4780:34)
    at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (eval at _translateSurface (http://localhost:3000/vendor.bundle.js:224869:27), <anonymous>:587:33)
    at init._reset (http://localhost:3000/vendor.bundle.js:337450:19)

有没有人以前遇到过这个，或者知道一个很棒的教程来使用剑道地图与 Angular 2+ ？

Answer 1

这样做的问题是组件渲染的顺序与DOM中的顺序。 将初始化移动到 jQuery 块中解决了这个问题，如下所示：

ngAfterViewInit() {
    kendo.jQuery(() => {
      const element = kendo.jQuery(this.kendoMap.nativeElement);
      ...
    });
}