如何以角度 5 获取计算机和浏览器的设备 ID？答案

【问题标题】：how to get device id of a computer and browser in angular 5?如何以角度 5 获取计算机和浏览器的设备 ID？
【发布时间】：2018-10-13 15:27:33
【问题描述】：

我正在 WEB 银行应用程序中工作，角度为 5。任务是我想找出计算机的设备 ID 和浏览器名称。

我试过这个 NPM 模块：

npm install ngx-device-detector --save

import { NgModule } from '@angular/core';
  import { DeviceDetectorModule } from 'ngx-device-detector';
  ...
  @NgModule({
    declarations: [
      ...
      LoginComponent,
      SignupComponent
      ...
    ],
    imports: [
      CommonModule,
      FormsModule,
      DeviceDetectorModule.forRoot()
    ],
    providers:[
      AuthService
    ]
    ...
  })

import { Component } from '@angular/core';
  ...
  import { DeviceDetectorService } from 'ngx-device-detector';
  ...
  @Component({
    selector: 'home',  // <home></home>
    styleUrls: [ './home.component.scss' ],
    templateUrl: './home.component.html',
    ...
  })

  export class HomeComponent {
    deviceInfo = null;
    ...
    constructor(..., private http: Http, private deviceService: DeviceDetectorService) {
      this.epicFunction();
    }
    ...
    epicFunction() {
      console.log('hello `Home` component');
      this.deviceInfo = this.deviceService.getDeviceInfo();
      console.log(this.deviceInfo);
    }
    ...
  }

输出：

{  
   "userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36",
   "os":"windows",
   "browser":"chrome",
   "device":"unknown",
   "os_version":"windows-10",
   "browser_version":"66.0.3359.139"
}

我得到的是浏览器名称，但不是设备 ID。看看 JSON。设备是设备：未知。

如果有任何其他选项或 NPM 模块，请推荐我完成此任务。

请帮帮我。

【问题讨论】：

设备未知，因为您没有在设备上运行代码。安卓/IOS上不行吗？
我没有使用 android 和 ios，因为我正在使用 web 应用程序并且页面在 chrome 浏览器中运行。如何找到计算机的设备ID？
电脑的设备ID是什么意思？
设备是指我想要我的计算机 ID。
抱歉，我不明白这个 ID 是什么。能给我举个例子吗？无论如何，您可以通过运行console.log(navigator);看到所有可以获取的信息

标签： angular angular5

【解决方案1】：

我认为只有原生应用才能做到这一点。所以你需要将你的 webapp 封装在一个原生的 app shell 中。

对于 Android，它称为 WebView。所以基本上它是一个原生 Android 应用程序，它封装了一个网站 (html)。

【讨论】：

【解决方案2】：

查看 ngx-device-detector 的演示 github 项目

export class AppComponent {
  propsToShow = ['userAgent', 'os', 'browser', 'device', 'os_version', 'browser_version'];
  deviceInfo = null;
  constructor(private deviceService: DeviceDetectorService) {
    this.deviceInfo = deviceService.getDeviceInfo();
    console.log(this.deviceInfo);
  }

  get isMobile() {
    return this.deviceService.isMobile();
  }

  get isTablet() {
    return this.deviceService.isTablet();
  }

  get isDesktop() {
    return this.deviceService.isDesktop();
  }

参考号：https://github.com/KoderLabs/ngx-device-detector/blob/master/demo/src/app/app.component.ts

希望这能解决你的问题。

【讨论】：