[英]How to fetch the device information using Angular2 and Typescript
我有一張桌子,我需要從打字稿中將這些詳細信息填寫到我的表格中。
1.Device Name
2. Device OS
3. Location
4. Browser
5. IsActive
這些字段必須從打字稿填寫,所以任何人都可以幫我解決這個問題
您可以使用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);
}
...
}
設備服務:
擁有以下屬性:
你可以使用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
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.