Блог

Я хотел бы показать пользовательский компонент, который я уже создал, когда нет подключения к Интернету.

Что у меня есть до сих пор:

1. Пользовательский компонент, отображаемый при отсутствии подключения к Интернету.
2. HttpInterceptor для проверки состояния моего подключения к Интернету.

 import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse,
  HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ServiceInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone(
      {
        setHeaders: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      }
    )
 
    const obs = next.handle(req);
 
    if (!window.navigator.onLine) {
      // Handle offline error
      // This message is printing correctly :D
      console.log("no internet connection");
      
      return;
    }
    
    obs.toPromise().catch((error) => {
      console.log(error.message);
    });
    return obs;
 }
} 


 

3. Простая услуга для потребления.

 import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private httpClient: HttpClient) { }

  public sendGetRequest(){
    return this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1');
  }
} 
 

4. Мой домашний компонент, где я потребляю свои услуги.

 import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  products = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {

    this.dataService.sendGetRequest().subscribe((data: any[])=>{
      console.log(data);
      this.products = data;
    })  
  }

}
 

Все работает правильно, когда есть подключение к Интернету.

Но как я могу сказать своему домашнему компоненту, что там нет Интернета?

Я не хочу проверять свой статус в Интернете в каждом компоненте, который у меня есть. Вот почему я проверил это в файле HttpInterceptor.

Вы можете проложить маршрут по выделенному маршруту, если нет такого Интернета, как этот

   if (!window.navigator.onLine) {
      // Handle offline error
      // This message is printing correctly :D
      console.log("no internet connection");
      // Save the current route state
      this.router.navigateByUrl('no-internet')
      return;
    } 

Вы также можете воспользоваться услугой вместе с субъектом поведения

1. Служба Подключения

 import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';  

@Injectable({
  providedIn: 'root'
})
export class ConnectivityService {

  isOnline = new BehaviorSubject();  
  constructor() { }
} 

2. Перехватчик

 @Injectable()
export class ServiceInterceptor implements HttpInterceptor {

  constructor(private connectivityService: ConnectivityService) {}

  intercept(req: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
    req = req.clone({
      setHeaders: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })

    const obs = next.handle(req);

    if (!window.navigator.onLine) {
      // Handle offline error
      // Update Online status
      this.connectivityService.isOnline.next(false)
      return;
    }

    obs.toPromise().catch((error) => {
      console.log(error.message);
    });
    return obs;
  }
} 

3. Затем в вашем домашнем компоненте

 import {
  DataService
} from '../data.service';
import {
  ConnectivityService
} from 'connectivityService'
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  products = [];

  constructor(
    private dataService: DataService,
    private connectivityService: ConnectivityService) {}

  ngOnInit() {

    this.connectivityService.isOnline.subscribe(isOnline => {
      if (isOnline) {
        // Your Logic
      }
    })

    this.dataService.sendGetRequest().subscribe((data: any[]) => {
      console.log(data);
      this.products = data;
    })
  }

}