Question

我是Angle 4的新手，在这里我需要检查网络状态并显示相应的组件。

从现在开始，如果网络不可用，但如果我刷新浏览器，则会显示错误页面，它会移动到主页即使网络不可用。

service.ts

  this.onlineStatusService.status.subscribe((status: OnlineStatusType) => {
     this.status = status;
      this.InternetStatus.next(this.status);
    });
  }

  public InternetStatus = new BehaviorSubject<number>(this.status);
  _InternetStatus = this.InternetStatus.asObservable();

我在这里获得网络状态。

app.component.ts

export class AppComponent {

  constructor( private Service:Service, private router: Router) {

  }
  ngOnInit(){
    this.router.navigate(['/loader']);
  }

  ngAfterViewInit(){
    setTimeout( ()=>{
      this.Service._InternetStatus.subscribe( data => { 
        if( data == 0)
          this.router.navigate(['/offline']);
          else
          this.router.navigate(['/home']);
      });
    }, 5000)
  }
}

每当刷新浏览器窗口时，网络状态就会设置为“未定义”。

参考：https://www.npmjs.com/package/ngx-online-status

谁能帮我解决这个问题。

Answer 1

如果网络中断，请使用catchError重定向到页面。

this.Service._InternetStatus
     .pipe(
        catchError((error) => {.
           console.log(error)
           this.router.navigate(['/offline']);
       })
    )
     .subscribe( data => { 
        if( data == 0)
          this.router.navigate(['/offline']);
          else
          this.router.navigate(['/home']);


});

如果Angular 4中没有互联网，如何显示网络错误组件

1 个答案: