Как заставить Kendo UI, DataViz Map и Angular 2 работать вместе

Я использую Kendo UI и Angular 2 в проекте, но, похоже, не могу заставить виджет карты работать с шейп-файлами в Angular 2.

Похоже, мне нужно интегрироваться с jQuery, поскольку компонент карты еще не указан как компонент Angular 2. Итак, я следовал инструкциям, изложенным здесь. Тем не менее, это все еще не работает. Вот что у меня есть на данный момент:

exampe.module.ts

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

пример-map.html

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

пример-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.

Чтобы исправить это, я включил версию jQuery, которую они использовали, в свой файл index.html:

<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)

Кто-нибудь пользовался этим раньше или знает отличный учебник по использованию Kendo Maps с Angular 2+?


kendo-ui-angular2 kendo-dataviz
person gordysc    schedule 02.02.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема заключалась в порядке рендеринга компонента по сравнению с тем, что было в DOM. Перемещение инициализации в блок jQuery решило проблему, например:

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