web-dev-qa-db-ja.com

Angular 4を使用してWebのインターネット接続を確認します

アプリケーション開発にAngular 4を使用しています。 Angular forを使用して接続に問題がある場合、ネットワーク接続が利用可能かどうかを確認する必要があります。 Angularで可能ですか4。

https://github.com/HubSpot/offlineで確認しました。これはangular 4では機能しないと思います。いずれかを提案してください。これは、Angular 4またはその他の代替手段にofflinejsを使用できますか？

ありがとうサラスC M

angularweb
9
user3541485

このためにライブラリを使用する必要はありません。navigator windowのようなグローバルオブジェクトを使用できます。 angle4で使用できます

public onlineOffline: boolean = navigator.onLine;
14
Sajeetharan

ただし、これにはライブラリは必要ありませんpublic onlineOffline: boolean = navigator.onLine;はトリックを行いますが、これは1回限りのチェックです。この値を監視可能なものとして扱う必要があるため、オンラインステータスが変更されるたびに更新されます。このため、rxjsが役立ちます。

これらをインポート

import { Observable, Observer, fromEvent, merge } from 'rxjs';
import { map } from 'rxjs/operators';

このメソッドを追加

  createOnline$() {
    return merge<boolean>(
      fromEvent(window, 'offline').pipe(map(() => false)),
      fromEvent(window, 'online').pipe(map(() => true)),
      new Observable((sub: Observer<boolean>) => {
        sub.next(navigator.onLine);
        sub.complete();
      }));
  }

コンストラクトまたはngOnInitからこのイベントをサブスクライブします

this.createOnline$().subscribe(isOnline => console.log(isOnline));

注：Angular 8.1およびrxjs 6.5.2を使用してIm

10
Dilshan Liyanage

ネットワーク接続の状態をチェックするNetworkConnectionというクラスを作成しました。コードサンプルはこちら

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

export enum ConnectionStatusEnum {
  Online,
  Offline
}

export class NetworkConnection {

  public static status: ConnectionStatusEnum = ConnectionStatusEnum.Online;
  private static online$: Observable<string>;
  private static offline$: Observable<string>;

  public static init() {
    NetworkConnection.online$ = Observable.fromEvent(window, 'online');
    NetworkConnection.offline$ = Observable.fromEvent(window, 'offline');

    NetworkConnection.online$.subscribe(e => {
      console.log('Online');
      NetworkConnection.status = ConnectionStatusEnum.Online;
    });

    NetworkConnection.offline$.subscribe(e => {
      console.log('Offline');
      NetworkConnection.status = ConnectionStatusEnum.Offline;
    });
  }

  constructor() {
    NetworkConnection.init();
  }

}

new NetworkConnection();

そして、あなたはそれを次のように使うことができます

import { NetworkConnection, ConnectionStatusEnum } from './ConnectionStatus';
....
if(NetworkConnection.status == ConnectionStatusEnum.Offline) {
    // do something
}
....

また、インターネットへの接続を確認する場合は、www.google.com の代わりに online/offlineイベント。 OR両方のアプローチの組み合わせ。

2
vinesh
if(navigator.onLine){
  alert("You are Online")
 }
  else {
   alert("You are Offline")
    }

navigator.onLine-> trueまたはfalseを返します

1
Yogendra

必要なタスクには、ng-connection-serviceというnpmパッケージがあります。完全なコードは次のとおりです。

import { Component,OnInit } from '@angular/core';
import { ConnectionService } from 'ng-connection-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'internet-connection-check';
  status = 'ONLINE'; //initializing as online by default
  isConnected = true;

  constructor(private connectionService:ConnectionService){
    this.connectionService.monitor().subscribe(isConnected => {
      this.isConnected = isConnected;
      if(this.isConnected){
        this.status = "ONLINE";
      } else {
        this.status = "OFFLINE"
      }
      alert(this.status);
    });
  }
  ngOnInit(){

  }

}

また、次のコードで動作する完全なコードを見つけることができます。 ここをクリック

0
Soni Kumari