如何在Angular中访问并读取assets目录下的beacons.js文件内容

前置说明 #

你提供的beacons.js存放在assets目录下，根据使用场景不同有两种实现方案：

方案一：直接导入JS对象校验（推荐） #

该方案无需发起网络请求，性能更高，适合仅需校验IP段是否存在的场景：

1. 先修改assets/beacons.js的最后一行，添加导出语句：

// 原有代码不变
export default allBeacons;

2. 在组件中直接导入对象，编写校验函数：

// 组件顶部导入
import allBeacons from '../../../assets/beacons.js';

// 组件内定义校验函数
checkBeaconExists(targetStr: string): boolean {
  // 统一转小写匹配，和原文件的处理逻辑对齐
  const formatTarget = targetStr.toLowerCase();
  // 遍历所有分组的IP段数组，判断是否存在匹配项
  return Object.values(allBeacons).some(ipList => ipList.includes(formatTarget));
}

3. 调用示例：

// 校验84.205.64.0/24是否存在
const isExist = this.checkBeaconExists('84.205.64.0/24');
console.log(isExist); // 输出true

方案二：读取JS原始文件内容校验 #

如果需要校验原始文件的完整文本内容（比如校验配置名、注释等非IP段内容），可以用HttpClient读取文件文本：

1. 先确保AppModule中已经导入HttpClientModule：

// app.module.ts中添加
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [HttpClientModule]
})

2. 组件中注入HttpClient，编写异步校验函数：

import { HttpClient } from '@angular/common/http';

export class YourComponent {
  constructor(private http: HttpClient) {}

  // 异步校验函数，返回Promise结果
  checkStrInBeaconFile(targetStr: string): Promise<boolean> {
    // 这里直接用/assets/beacons.js更稳妥，避免相对路径打包后层级错误
    return this.http.get('/assets/beacons.js', { responseType: 'text' })
      .toPromise()
      .then(fileContent => fileContent.includes(targetStr))
      .catch(() => false);
  }
}

3. 调用示例：

this.checkStrInBeaconFile('RIPE').then(isExist => {
  console.log(isExist); // 输出true
})

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