Angular 如何检测带有角度传感器的浏览器？
我需要检测浏览器是IE还是带有角度的Edge（TypeScript）。可能吗？如果是，如何进行？请使用以下代码：Angular 如何检测带有角度传感器的浏览器？,angular,typescript,browser-detection,Angular,Typescript,Browser Detection,我需要检测浏览器是IE还是带有角度的Edge（TypeScript）。可能吗？如果是，如何进行？请使用以下代码： const isChromiumBased = !!window["chrome"] && (!!window["chrome"]["webstore"] || !!window["chrome"]["runtime"]); //Opera 8.0+ var
const isChromiumBased =
!!window["chrome"] &&
(!!window["chrome"]["webstore"] || !!window["chrome"]["runtime"]);
//Opera 8.0+
var isOpera=（！！window.opr&&！！opr.addons）|！！window.opera | | navigator.userAgent.indexOf（'OPR/'）>=0；
//火狐1.0+
var isFirefox=typeof InstallTrigger！='未定义'；
//Safari 3.0+“[object HTMLElementConstructor]”
var isSafari=/constructor/i.test（window.HTMLElement）| |（函数（p）{return p.toString（）==“[object SafariRemoteNotification]”；}）（！window['safari']| safari.pushNotification）；
//Internet Explorer 6-11
var isIE=/*@cc_on@*/假| |！！document.documentMode；
//边缘20+
var isEdge=！伊西&！！window.StyleMedia；
//铬1+
//var isChrome=！！window.chrome&！！window.chrome.webstore；
//如果未定义isChrome，则使用：
var isChrome=！！window.chrome&（！！window.chrome.webstore | |！！window.chrome.runtime）；
//闪烁引擎检测
var isBlink=（isChrome | | isOpera）&！！window.CSS；
var output=“通过ducktyping检测浏览器：
”；
输出+='isFirefox:'+isFirefox+'
'；
输出+='isChrome:'+isChrome+'
'；
输出+=“isSafari:”+isSafari+”
；
输出+='isOpera:'+isOpera+'
'；
输出+='isIE:'+isIE+'
'；
输出+=“isEdge:”+isEdge+”
；
输出+='isBlink:'+isBlink+'
'；
document.body.innerHTML=输出我以前用过这个，效果很好
const isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)
您可以将regex与useragent一起用于检测IE
private isIE() {
const match = navigator.userAgent.search(/(?:Edge|MSIE|Trident\/.*; rv:)/);
let isIE = false;
if (match !== -1) {
isIE = true;
}
return isIE;
}
但是，通常建议使用特征检测而不是浏览器检测。您可以使用Modernizer库来实现该功能对于angular用户，您可以使用
npm安装ngx设备检测器——保存
以上答案不适用于我如果您想在浏览器检测IE（5,6,7,8）时显示消息，则可以使用代码行
首先，此代码仅用于index.html文件，因为编译器首先读取此文件
<body>
<p id="NRL" style="background-color: aquamarine;text-align: center"></p>
<app-root></app-root>
<script>
let isIE1 =/^.*MSIE [5-9]/i.test(window.navigator.userAgent);
if(isIE1){
alert('you are using older version of IE .........')
document.getElementById("NRL").innerHTML = "you are using older version of IE .........";
}
</script>
</body>
让isIE1=/^.*MSIE[5-9]/i.test（window.navigator.userAgent）；
如果（isIE1）{
警报（'您正在使用旧版本的IE……'）
document.getElementById（“NRL”）.innerHTML=“您正在使用旧版本的IE……”；
}
这对我很有用：
public getBrowserName() {
const agent = window.navigator.userAgent.toLowerCase()
switch (true) {
case agent.indexOf('edge') > -1:
return 'edge';
case agent.indexOf('opr') > -1 && !!(<any>window).opr:
return 'opera';
case agent.indexOf('chrome') > -1 && !!(<any>window).chrome:
return 'chrome';
case agent.indexOf('trident') > -1:
return 'ie';
case agent.indexOf('firefox') > -1:
return 'firefox';
case agent.indexOf('safari') > -1:
return 'safari';
default:
return 'other';
}
}
public getBrowserName（）{
const agent=window.navigator.userAgent.toLowerCase（）
开关（真）{
案例代理。indexOf（'edge'）>-1：
返回“边缘”；
case agent.indexOf（'opr'）>-1&&！！（窗口）。opr:
返回“歌剧”；
case agent.indexOf（'chrome'）>-1&&！！（窗口）。chrome:
返回“chrome”；
案件代理人indexOf（'trident'）>-1：
返回“ie”；
case agent.indexOf（'firefox'）>-1：
返回“firefox”；
案例代理。indexOf（'safari'）>-1：
返回‘狩猎’；
违约：
返回“其他”；
}
}
调用getBrowserName（）
后，可以将返回值与=='edge'
进行比较，以查看是否在edge浏览器中操作。如果您对使用外部模块感到满意，可以使用ngx设备检测器
$ 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();
const isMobile = this.deviceService.isMobile();
const isTablet = this.deviceService.isTablet();
const isDesktopDevice = this.deviceService.isDesktop();
console.log(this.deviceInfo);
console.log(isMobile); // returns if the device is a mobile device (android / iPhone / windows-phone etc)
console.log(isTablet); // returns if the device us a tablet (iPad etc)
console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.
}
...
}
从'@angular/core'导入{Component}；
...
从“ngx设备检测器”导入{DeviceDetectorService}；
...
@组成部分({
选择器：'主'，//
样式URL:['./home.component.scss']，
templateUrl:“./home.component.html”，
...
})
导出类HomeComponent{
deviceInfo=null；
...
构造函数（…，私有http:http，私有deviceService:DeviceDetectorService）{
这个函数是（）的；
}
...
表函数（）{
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）；//如果应用程序在桌面浏览器上运行，则返回。
}
...
}
设备服务
保存以下属性
浏览者
操作系统
装置
用户代理
os_版本
辅助方法
isMobile（）：返回设备是否为移动设备（android/iPhone/windows phone等）
isTablet（）：如果设备使用平板电脑（iPad等），则返回
isDesktop（）：返回应用程序是否在桌面浏览器上运行
以下是文档链接：您可以使用以下代码获取浏览器名称：
let match=navigator.userAgent.search（/（？：Edge | MSIE | Trident\/.*；rv:）/）；
让伊西=假；
如果（匹配！=-1）{
伊西=真；
}
log（isIE，'isIE'）要检测浏览器是否基于Chromium，请使用以下代码：
const isChromiumBased =
!!window["chrome"] &&
(!!window["chrome"]["webstore"] || !!window["chrome"]["runtime"]);
对于仍在查找此线程的用户：
如果您使用的是Angular 10或更高版本，我建议使用平台模块
，该模块在版本10中添加到Angular Material CDK中
浏览器用户代理往往会随着时间的推移而变化。而不是手动解析它，我会考虑使用一个维护良好的库，以确保未来的支持。最受欢迎的选择是：
1.角材料
许多人不知道这一点，但在V6.4.7中介绍了检测模块：
平台：通过比较userAgent字符串并检查特定于浏览器的全局属性来检测当前平台的服务
只需导入平台
服务并直接检查import { UAParser } from 'ua-parser-js';
const parser = new UAParser();
const result = parser.getResult();
const isEdge = result.browser == 'Edge';