沒有互聯網連接時如何顯示自定義組件

我想展示一個我在沒有互聯網連接時已經創建的自定義組件。

到目前為止我有什么：

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;
    })  
  }

}

當有互聯網連接時，一切正常。

但是我怎么能對我的 HomeComponent 說沒有互聯網呢？

我不想在我擁有的每個組件中檢查我的互聯網狀態。這就是我在 httpInterceptor 檔案上檢查的原因。

uj5u.com熱心網友回復：

如果沒有這樣的互聯網，您可以路由到您的專用路由

  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. 然后在您的 Home 組件中

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;
    })
  }

}

標籤：有角的 打字稿

上一篇：AngularFormGroup/FormValue

下一篇：角度日期管顯示不正確的日期