windows 如何使用Angular2和Typescript获取设备信息

clj7thdc  于 2023-10-22  发布在  Windows
关注(0)|答案(2)|浏览(150)

我有一个表,我需要填写这些细节到我的表从 typescript 。

1.Device Name
2. Device OS
3. Location
4. Browser
5. IsActive

这些领域必须填写从 typescript ,所以任何人都可以帮助我解决这个问题

f0brbegy

f0brbegy1#

您可以使用,ngx-device-detector
ngx-device-detector是一款Angular 2(及更高版本)支持的AOT兼容设备检测器,可帮助识别浏览器、操作系统和其他有关使用该应用程序的设备的有用信息。该处理基于用户代理。

安装:

要安装此库,请运行:

$ npm install ngx-device-detector --save

用法:

Import DeviceDetectorModule in your app.module.ts

  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);
    }
    ...
  }

设备服务:

包含以下属性:

  • 浏览器
  • OS
  • 装置
  • userAgent
  • 操作系统版本
gg0vcinb

gg0vcinb2#

您可以使用**angular-device-information**是一个功能强大的Angular 包来检测操作系统和版本
npm i angular-device-information

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

 export class HomeComponent {
 
   constructor(private deviceInformationService: AngularDeviceInformationService) {
 
      console.log(deviceInformationService.isMobile());  // returns if the device is a mobile device (android / iPhone / windows-phone etc)
      console.log(deviceInformationService.isTablet());  // returns if the device is a tablet (tablet iPad etc)
      console.log(deviceInformationService.isDesktop()); // returns if the app is running on a Desktop browser.
      console.log(deviceInformationService.getDeviceType()); // returns if the app is running on a Desktop browser.
      console.log(deviceInformationService.getDeviceInfo().os);  // returns os name like Windows/Andtoid/iOS/Linux/Mac OS X etc
      console.log(deviceInformationService.getDeviceInfo().osVersion);  // returns os version like 10/8.1/7 ...etc
      console.log(deviceInformationService.getDeviceInfo().browser);  // returns browser name like chrome/firefox ...etc
      console.log(deviceInformationService.getDeviceInfo().browserVersion);  // returns browser version as number
      console.log(deviceInformationService.getDeviceInfo().browserMajorVersion);  // returns full browser version as number
      console.log(deviceInformationService.getDeviceInfo().screen_resolution);  // returns screnn size like 1390x860/640x800 ...etc
      console.log(deviceInformationService.getDeviceInfo().cookies);  // returns cookies enabled or no 
      console.log(deviceInformationService.getDeviceInfo().userAgent);  // returns userAgent
   }
   
 }

相关问题