angular 7 的 ESRI 加载程序搜索小部件聚焦问题

Question

我必须在 angular 应用程序中使用 esri-loader 实现 ESRI 地图。一切正常，但如果我们在搜索小部件中键入内容，然后将焦点从搜索小部件上移开，则会抛出以下错误

"Uncaught TypeError: Cannot read property 'parentNode' of null
    at HTMLInputElement.d (dojo.js:2209)
    at Object.trigger (jquery.min.js:2)
    at Object.simulate (jquery.min.js:2)
    at HTMLDocument.n (jquery.min.js:2)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1693)
    at HTMLDocument.globalZoneAwareCaptureCallback (zone.js:1762)

我使用的是 4.14 版的 esri

我有参考this但无法解决。

package.json:

"esri-loader": "^2.15.0"

代码：

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
import { loadModules ,loadScript} from "esri-loader";    
@Component({
    selector: "app-esri-map",
    template: `
  <span> map component workes</span>
  <div class="esri-view" #mapViewNode></div>
  `,
    styles: [`
    @import url('https://js.arcgis.com/4.14/esri/css/main.css');    
    .esri-view {
      height: 600px;
    }`
    ]
})
export class MapComponent implements OnInit, OnDestroy {
    // The <div> where we will place the map
    @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;
    view: any;    
    constructor() {
         loadScript();
     }    
    async initializeMap() {
        try {
           
            // Load the modules for the ArcGIS API for JavaScript
            const options = { version: '4.14', css: true };
          
            const [Map, MapView, Search] = await loadModules(
                ["esri/Map",
                    "esri/views/MapView",
                    "esri/widgets/Search"],options);

            // Configure the Map
            const mapProperties = {
                basemap: "streets"
            };

            const map = new Map(mapProperties);

            // Initialize the MapView
            const mapViewProperties = {
                container: this.mapViewEl.nativeElement,
                zoom: 10,
                map: map
            };

            this.view = new MapView(mapViewProperties);
            var search = new Search({
                view: this.view,
                searchTerm: `15 Inverness Way East, Englewood, CO80112, United States`,
            });
            console.log('search', search.search());
            this.view.ui.add(search, "top-right");
            search.on("select-result", function (event) {
                console.log("The selected search result: ", event);
                console.log('attributes', event.result.feature.attributes)
            });
            await this.view.when(); // wait for map to load
            console.log('this.view', this.view);
            return this.view;
        } catch (error) {
            console.error("EsriLoader: ", error);
        }
    }

    ngOnInit() {
        this.initializeMap();
    }
    ngAfterViewInit() {

    }

    ngOnDestroy() {
        if (this.view) {
            // destroy the map view
            this.view.container = null;
        }
    }
}

我需要更改一些配置吗？请给我建议。

Answer 1

将以下代码添加到 initializeMap() 中，以便我们可以明确地将焦点设置为 null

const handler = search.on('search-focus', event => {
                handler.remove();
                const input = document.querySelector('.esri-search__input') as any
                if (input) {
                    input.onfocusout = null;
                }
            });

完整代码块

 import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, Output, EventEmitter } from "@angular/core";
    import { loadModules, loadScript } from "esri-loader";
    @Component({
        selector: "app-esri-map",
        template: `
      <div class="esri-view" #mapViewNode></div>
      `,
        styles: [`
     /* @import url('https://js.arcgis.com/4.14/esri/css/main.css'); */
        .esri-view {
          height: 400px;
        }`
        ]
    })
    export class MapComponent implements OnInit, OnDestroy {
        // The <div> where we will place the map
        @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;
        view: any;
        @Input() searchString: string;
        @Output() notifyAttributes: EventEmitter<any> = new EventEmitter();
        constructor() {
            //   loadScript();
            //"esri-loader": "^2.15.0", in dependency section.
        }
        async initializeMap() {
            try {
                // Load the modules for the ArcGIS API for JavaScript
                const options = { version: '4.14', css: true };
                const [Map, MapView, Search] = await loadModules(
                    ["esri/Map",
                        "esri/views/MapView",
                        "esri/widgets/Search"], options);
                // Configure the Map
                const mapProperties = {
                    basemap: "streets"
                };
                const map = new Map(mapProperties);
                // Initialize the MapView
                const mapViewProperties = {
                    container: this.mapViewEl.nativeElement,
                    zoom: 2,
                    center: [0.0000, 45.00000],
                    map: map
                };
                this.view = new MapView(mapViewProperties);
                var search = new Search({
                    view: this.view,
                    searchTerm: this.searchString,
                });
                if (this.searchString) {
                    search.search();
                }
                this.view.ui.add(search, "top-right");
                const handler = search.on('search-focus', event => {
                    handler.remove();
                    const input = document.querySelector('.esri-search__input') as any
                    if (input) {
                        input.onfocusout = null;
                    }
                });
                search.on("select-result", (event) => {
                    this.notifyAttributes.emit(event.result.feature.attributes);
                });
                await this.view.when(() => {
                    const input = document.querySelector('.esri-search__input') as any
                    if (input) {
                        input.onfocusout = null;
                    }
                }); // wait for map to load
                return this.view;
            } catch (error) {
                console.error("EsriLoader: ", error);
            }
        }
        ngOnInit() {
            this.initializeMap();
        }
        ngOnDestroy() {
            if (this.view) {
                this.view.container = null;
            }
        }
    }

angular 7 的 ESRI 加载程序搜索小部件聚焦问题

ESRI loader search widget focus out issue with angular 7

esri

typescript

angular

angular7