Angular 2+的设备/操作系统/浏览器检测器– ngx-device-detector

Angular 2+的设备/操作系统/浏览器检测器– ngx-device-detector
插件名称 ngx-device-detector
发布时间 2020年6月28日
插件作者 KoderLabs

ngx-device-detector是一个Angular2 +库,用于检测设备,操作系统和浏览器详细信息。

安装:

# NPM
$ npm install ngx-device-detector --save

使用:

导入DeviceDetectorModule您的app.module.ts

  import { NgModule } from '@angular/core';
  import { DeviceDetectorModule } from 'ngx-device-detector';
  ...
  @NgModule({
    declarations: [
      ...
      LoginComponent,
      SignupComponent
      ...
    ],
    imports: [
      CommonModule,
      FormsModule,
      DeviceDetectorModule // <-----
      // 在Angular v7及以下版本中使用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();
      const isMobile = this.deviceService.isMobile();
      const isTablet = this.deviceService.isTablet();
      const isDesktopDevice = this.deviceService.isDesktop();
      console.log(this.deviceInfo);
      console.log(isMobile);  // 返回设备是否是移动设备(android / iPhone / windows-phone等)
      console.log(isTablet);  // 返回设备是否为平板电脑(iPad等)
      console.log(isDesktopDevice); // 返回应用程序是否在桌面浏览器上运行。
    }
    ...
  }

辅助方法

  • isMobile():返回设备是否为移动设备(Android / iPhone / Windows Phone等)
  • isTablet():如果设备使用平板电脑(iPad等),则返回
  • isDesktop():返回应用程序是否在桌面浏览器上运行。