angular - 如何以 Angular 5 获取计算机和浏览器的设备 ID？

Question

我正在使用 Angular 5 在 WEB 银行应用程序中工作。任务是我想找出计算机的设备 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 模块，请推荐我完成此任务。

请帮助我。

Answer 1

检查 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

希望这能解决您的问题。