如何在Angular中获取指定联网信息？求推荐适用库

你需要的网络信息涵盖连接类型、蜂窝网络类型、速率、信号强度等，以下是在Angular中实现的两种思路：原生API和第三方库。

一、原生API实现（无需额外依赖） #

利用浏览器提供的Network Information API及相关Web API，部分字段需做兼容处理：

• connectionType：通过navigator.connection.type获取，返回值包含wifi、ethernet、cellular等，对应你的需求；蓝牙连接检测需使用Web Bluetooth API，但仅支持HTTPS环境且需要用户授权，场景有限。
• networkType：蜂窝网络类型用navigator.connection.effectiveType，返回4g、3g、2g等值，直接匹配你的字段定义。
• networkStrength：蜂窝信号强度可通过实验性APInavigator.connection.rssi获取（仅部分移动浏览器支持）；WiFi信号强度无通用原生API，可通过navigator.connection.downlink（单位Mbps）间接判断强弱。
• cellularOperator：原生无直接获取运营商的API，可通过WebRTC的RTCPeerConnection获取ICE候选中的运营商标识，但结果不稳定；若为移动端APP，可借助原生桥接能力获取。
• uploadingSpeed/downloadingSpeed：通过请求固定大小的资源计算速率，示例代码：

async getDownloadSpeed(): Promise<number> {
  const startTime = Date.now();
  const response = await fetch('/assets/1kb-test-file.txt');
  await response.blob();
  const duration = (Date.now() - startTime) / 1000;
  const fileSizeInBytes = 1024;
  return (fileSizeInBytes / duration) / 1024; // 返回Mbps
}

• networkAccuracy：可通过多次测速的差值计算稳定性，对比navigator.connection.downlink和实际测速结果的偏差，偏差越小则准确性越高。

二、推荐第三方库 #

如果追求更稳定的跨平台支持和封装好的API，推荐以下库：

1. ngx-network-status #

专为Angular打造的网络状态库，封装了原生Network Information API，支持获取连接类型、蜂窝网络类型、信号强度等，使用步骤：

• 安装：npm install ngx-network-status
• 导入模块：在AppModule中导入NgxNetworkStatusModule
• 注入服务使用：

import { NetworkStatusService } from 'ngx-network-status';

constructor(private networkService: NetworkStatusService) {
  this.networkService.getNetworkStatus().subscribe(status => {
    console.log(status.connectionType, status.effectiveType);
  });
}

2. @capacitor/network #

适用于Angular混合开发（Web/Android/iOS），Capacitor官方提供的网络库，能获取运营商名称、信号强度、上传下载速度等全面信息，使用步骤：

• 安装：npm install @capacitor/network
• 初始化后监听网络状态：

import { Network } from '@capacitor/network';

Network.addListener('networkStatusChange', status => {
  console.log('Network status changed', status);
});

const status = await Network.getStatus();
console.log('Current network status', status);

3. network-information-types #

补充TypeScript类型定义，配合原生API使用，让你的网络信息对象类型更安全，安装：npm install network-information-types --save-dev，之后可直接引用类型定义。

注意事项 #

• 原生API存在浏览器兼容性差异，桌面端支持度低于移动端；
• 若开发跨平台APP，优先选择Capacitor/Cordova类库，能获取更精准的硬件层面网络信息；
• 测速结果受服务器响应、网络拥堵影响，建议多次取平均值。

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