@types/arcgis-js-api 在 Angular 5 应用程序中答案

【问题标题】：@types/arcgis-js-api in angular 5 application@types/arcgis-js-api 在 Angular 5 应用程序中
【发布时间】：2018-03-18 18:40:13
【问题描述】：

我在 angular5 应用程序中使用 arcgis-js-api 类型。当我尝试在多个组件中导入类型时，出现未捕获的引用错误：__esri 未定义。我已将 arcgis-js-api 包含到 tsconfig.app.json 文件中的类型数组中。这是我的代码。

  import { Component, OnInit, Input, ViewChild, ElementRef } from 
'@angular/core';
  import * as esriLoader from 'esri-loader';
  import { environment } from '../../../environments/environment';
  import Esri = __esri;

  @Component({
    selector: 'app-custom-widget',
    templateUrl: './custom-widget.component.html',
    styleUrls: ['./custom-widget.component.css']
  })
  export class CustomWidgetComponent implements OnInit {
    private _mapView: Esri.MapView;
    private _scriptOptions: any;

    @ViewChild('customWidget') widgetElement: ElementRef;
    @Input()
    set mapView(mapView: Esri.MapView) {
      if (!mapView) {
        return;
      }
      this._mapView = mapView;
      this.renderWidget();
    }
    get mapView(): Esri.MapView {
      return this._mapView;
    }

    constructor() {
      this._scriptOptions = {
        url: environment.arcgisAPIVersion
      };
    }

    ngOnInit() {

    }

    renderWidget(): void {
      esriLoader.loadModules([
        'esri/widgets/Widget'
      ], this._scriptOptions).then(([Widget]) => {
        const widgetProperties: Esri.WidgetProperties = {
          container: this.widgetElement.nativeElement
        };

        const widget: Esri.Widget = new Widget(widgetProperties);

        this._mapView.ui.add(widget, 'bottom-right');
      });
    }

  }

【问题讨论】：

您没有加载__esri，但您确实使用了它。这就是你得到错误的原因。
问题在于通过全局变量表达依赖关系，与 TypeScript 无关。请注意，这是一个运行时错误。
@Aluan Haded：如果我没有加载 __esri，它也不应该在其他组件中工作。我看到在多个组件中使用 __esri 命名空间时会发生这种情况。
你能解决这个问题吗？当我尝试在多个组件中使用 __esri 命名空间时，我也会遇到同样的错误。

标签： typescript esri-javascript-api

【解决方案1】：

我发现这个解决方案对我有用-
我创建了一个导入命名空间的模型文件，然后我在需要的地方使用了类型（有效地避免了错误“ReferenceError：__esri 未定义，不能在多个组件中使用此命名空间”）。

示例：
在 esri.models.ts 文件中-

import esri = __esri;  
export interface esriMapView extends esri.MapView {}
export interface esriLayerView extends esri.LayerView {}

在组件中-

import { esriMapView } from "../../modules/esri.models";
const mapView: esriMapView = new MapView({});

【讨论】：