如何在Angular 2+中检测网络断开

Question

我试图找出网络断开的问题。我尝试了多种方法。我仍然没有得到解决方案。我无法通过状态码实现。

这是我的示例代码：

    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', 'Bearer ' + this.token); 

    this.http.get('http://someurl/'+userId,{headers:headers})

    .map(res => res.json())

    .subscribe(
      data => {
      console.log(data);
     },

    error => {
      console.log(error);
      if(error.status == 500) {
        this.dashResponse = false;
        this.notFoundResponse = false;
        this.serverErrorResponse = true;
      }
      else if(error.status == 404)
      {
        this.dashResponse = false;
        this.notFoundResponse = true;
        this.serverErrorResponse = false;
      }
      else if(error.status == 401)
      {
        this.router.navigate(['/login']);
        alert('Un Authorized');
        this.refresh();
      }
      else
      {
        this.dashResponse = false;
        this.notFoundResponse = false;
        this.serverErrorResponse = true;
      }
    }

     );

谁能解决我的问题？。提前致谢。

Answer 1

我找到了问题的解决方案。

解决方法如下：

导入 HostListener

 import { Component, OnInit, HostListener,OnDestroy } from '@angular/core';

将此代码放入您的 AppComponent

 export class AppComponent implements OnInit,OnDestroy  {

 //Offline Event
 @HostListener('window:offline', ['$event'])
 OfflineEvent(event: Event) { 

  console.log(event);
   //do something.....
 }

 //Online event
 @HostListener('window:online', ['$event'])
 OnlineEvent(event: Event) {

   console.log(event);
   //do something.....

   }

  }

您可以使用 HostListener 显示您想要显示的任何内容。

如何在Angular 2+中检测网络断开

How to detect network is disconnected in Angular 2+

error-handling

angular2-routing