代码之家 › 专栏 › 技术社区 › Bhrungarajni

如何使用angular2和typescript获取设备信息

navigator typescript angular windows

-2

Bhrungarajni · 技术社区 · 7 年前

我有一张桌子,我需要用打字机把这些细节填到我的桌子上。

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

这些字段必须用typescript填写,所以有人能帮我解决这个问题吗?

1 回复 | 直到 7 年前

1

4

Sravan 7 年前

你可以使用, 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);
    }
    ...
  }

设备服务:

保留以下属性:

浏览器
操作系统
装置
用户代理
操作系统版本