Question

我有一种情况需要向没有使用chrome的所有人显示警告消息。我尝试使用vanilla JS，但遇到问题，并想知道我是否可以使用Angular 2实现这一点并将其设置在我的根组件上。

Answer 1

您可以在根组件的onInit（）方法中检查浏览器是否为chrome，并使用primeNG显示烤面包机。

  export class AppComponent implements OnInit {
  title:string;
  message:string;
  msgs: Message[] = [];
  constructor(private _window:WindowRef) {}

  ngOnInit(){
    this.title = 'Check browser example'
    let isChrome = !!this._window.nativeWindow.chrome && !!this._window.nativeWindow.chrome.webstore;
    if(!isChrome){
      this.message = "You are not using Chrome";
      this.msgs.push({severity:'warn', summary:'Warning Message', detail:'Your are not using Chrome'});
      alert("Not using chrome");
    }else{
      this.msgs.push({severity:'success', summary:'Success Message', detail:'Your are using Chrome'});
      this.message = "You are using Chrome";
    }
  }
}

要获取对窗口对象的引用，请创建一个服务：

import {Injectable} from '@angular/core';

function _window(): any {
    // return the native window obj
    return window;
}

@Injectable()
export class WindowRef {

    get nativeWindow(): any {
        return _window();
    }

}

**编辑：**用primeNG替换plunkr示例并创建服务以获取window对象的引用。

示例：https://plnkr.co/edit/pTgV3p7MpKfDb5irlaQn?p=preview

参考：How to detect Safari, Chrome, IE, Firefox and Opera browser?

Answer 2

检查ng2-responsive。

您可以根据浏览器类型，设备类型，视口大小和方向显示/隐藏组件（例如您的消息组件）。

希望有所帮助。

Answer 3

如果您想在Angular2应用中检测浏览器，则只能以这种方式使用javascript：

var isChromeBrowser = !!window.chrome && !!window.chrome.webstore;

但我认为你想要检测Blink引擎，而不是Chrome浏览器。通过javascript的每个检测代码，您都可以找到here

您可以在TypeScript文件中使用 window 变量，但如果您要创建单元测试，则应创建一些服务以获取窗口对象，例如：< / p>

import { Injectable } from '@angular/core';

@Injectable()
export class WindowService {
  public window = window;
}

并以这种方式使用它：

@Component({
     templateUrl:"someComponent.html"
})
export class SomeComponent {

  public isChromeBrowser: boolean;

  constructor(private windowService: WindowService) {
!!window.chrome && !!window.chrome.webstore;
    this.isChromeBrowser = windowService.window.chrome && !!windowService.window.chrome.webstore;
  }
}

Answer 4

以下语句：

const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

引发错误：

类型“窗口”上不存在属性“ chrome”

解决方法是：

const isChrome = !!window['chrome'] && (!!window['chrome'].webstore || !!window['chrome'].runtime);

我一直在测试它，并且工作正常：

ngOnInit() {
    const isChrome = !!window['chrome'] && (!!window['chrome'].webstore || !!window['chrome'].runtime);
    console.log( 'isChrome: ' + isChrome );
}

向没有使用Angular 2的Chrome的每个人显示一条消息

4 个答案: