Angular 4如何获取外部JS文件中的变量？

嘿，我来给你几个不用复制settings.js代码就能搞定的方案，完美适配你的需求：

这是最省心的方式，不用动你的settings.js，只要两步：

1. 先在项目根目录的index.html里引入外部JS文件：

<script src="./assets/settings.js"></script>

2. 在你的Angular组件里，声明这个全局变量的类型（如果用TypeScript的话），之后就能直接用了：

// 比如你的settings.js里有个叫locationMap的变量，存着标记和位置ID的映射
declare const locationMap: { [markerName: string]: number };

@Component({
  // 组件配置
})
export class MapComponent {
  ngOnInit() {
    // 直接访问变量，比如打印看看
    console.log(locationMap);
  }
}

这样你就能在组件的任何地方调用locationMap，完全不用复制代码。

如果可以修改settings.js的结构，把它改成ES模块是更符合现代前端规范的做法：

1. 修改./assets/settings.js，把需要的变量导出：

// settings.js
export const locationMap = {
  'marker_北京': 1001,
  'marker_上海': 1002,
  // 你的其他标记对应ID
};

2. 在Angular组件里直接导入这个模块：

import { locationMap } from '../assets/settings.js';

@Component({
  // 组件配置
})
export class MapComponent {
  ngOnInit() {
    console.log(locationMap); // 直接用
  }
}

注意：如果TypeScript报错，需要在tsconfig.json里调整两个配置：

• 把allowJs设为true
• 在include数组里加上"src/assets/**/*.js"

如果不想提前在index.html里引入，或者需要用到地图时才加载settings.js，可以用动态创建script标签的方式：

@Component({
  // 组件配置
})
export class MapComponent {
  private locationMap: { [markerName: string]: number } | null = null;

  ngOnInit() {
    this.loadSettingsJs().then(map => {
      this.locationMap = map;
      // 加载完成后再初始化地图相关逻辑
    });
  }

  private loadSettingsJs(): Promise<{ [markerName: string]: number }> {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = './assets/settings.js';
      script.onload = () => {
        // 通过window对象访问全局变量
        resolve(window['locationMap']);
      };
      script.onerror = () => reject(new Error('加载settings.js失败'));
      document.body.appendChild(script);
    });
  }
}

额外解决SVG标记点击的问题 #

你提到SVG地图标记没法加事件监听器，这里可以用事件委托的方式搞定：
给包裹SVG的容器加点击事件，然后通过点击目标判断是不是标记元素，再拿对应ID发请求：

// 组件里的点击处理函数
onMapClick(event: MouseEvent) {
  const target = event.target as SVGElement;
  // 假设你的SVG标记元素有自定义属性data-marker-name
  const markerName = target.getAttribute('data-marker-name');
  
  if (markerName && this.locationMap) {
    const locationId = this.locationMap[markerName];
    // 发送HTTP请求
    this.http.get(`/api/locations/${locationId}`).subscribe(res => {
      // 处理返回的位置数据，比如弹窗展示
    });
  }
}

然后在模板里给容器绑定点击事件：

<div class="map-container" (click)="onMapClick($event)">
  <svg><!-- 你的SVG地图代码 --></svg>
</div>

这几个方案都能帮你避开复制代码的麻烦，根据你的实际情况选就行～

内容的提问来源于stack exchange，提问作者raouaoul