向所有未使用 chrome 和 Angular 的人显示消息 2

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";
    }
  }
}

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

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

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

@Injectable()
export class WindowRef {

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

}

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

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

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

Answer 2

勾选ng2-responsive。

您可以 show/hide 基于浏览器类型、设备类型、视口大小和方向的组件（例如您的消息组件）。

希望对您有所帮助。

Answer 3

如果您想在 Angular2 应用程序中检测浏览器，您只能使用 javascript 这样的方式：

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

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

您可以在 TypeScript 文件中只使用 window 变量，但是如果您要创建单元测试，您应该创建一些服务来获取 window对象，例如：

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);

抛出错误：

Property 'chrome' does not exist on type 'Window'

修复方法是：

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 );
}

向所有未使用 chrome 和 Angular 的人显示消息 2

show a message to everyone who is not using chrome with Angular 2

browser-detection

angular