показать сообщение всем, кто не использует хром с Angular 2

Question

У меня возникла ситуация, когда мне нужно отображать предупреждающее сообщение всем, кто не использует хром. Я пробовал это с помощью vanilla JS, но столкнулся с проблемами и задался вопросом, могу ли я на самом деле добиться этого с помощью Angular 2 и просто установить его на свой корневой компонент.

Answer 1

Проверить ng2-responsive.

Вы можете отобразить/скрыть компонент (например, ваш компонент сообщения) в зависимости от типа браузера, типа устройства, размера и ориентации видового экрана.

Надеюсь, что это поможет.

Answer 2

Вы можете проверить, является ли браузер хром в методе onInit() вашего корневого компонента и показывать тостер с помощью 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(); 
    } 

} 

** Edit: ** Заменено plunkr с primeNG примера и создали услугу, чтобы получить ссылку на объект окна.

Пример: https://plnkr.co/edit/pTgV3p7MpKfDb5irlaQn?p=preview

Ссылка: How to detect Safari, Chrome, IE, Firefox and Opera browser?

Answer 3

Если вы хотите, чтобы обнаружить браузер в приложении Angular2, вы можете использовать только JavaScript таким образом:

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

, но я думаю, что вы хотели бы обнаружить Blink двигатель, а не Chrome браузер. Каждый код обнаружения с помощью Javascript вы можете найти here

Вы можете использовать только окно переменных в машинописном файле, но если вы собираетесь создать модульное тестирование, вы должны создать некоторый сервис для получения объекта окна, например:

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