error-handling - 如何检测网络在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显示任何想要显示的内容。