The constructor in the MyApp class, calls the provider only once

Question

I need to call in each of the pages, the connection status of the wifi. Then use a provider, but in the MyApp(app.component.ts) constructor, call the provider(ConectivityServiceProvider) only once.

app.component.ts

import { ConectivityServiceProvider } from '...'
import { Network } from '.....';
export class MyApp {
  conectivity:boolean
  constructor(private provider: ConectivityServiceProvider,public network: Network){
     platform.ready().then(() => {
       this.conectivity=provider.isOnline();
       // call once in all pages
       if(this.conectivity){
          //do someting
       }else //do something
     }
  }
}

Provider:

@Injectable()
export class ConectivityServiceProvider {
statusConectivity: boolean =true;
constructor(public network: Network){
     this.network.onDisconnect().subscribe(() => {
        this.statusConectivity=false;
      });
}
isOnline(){
    return this.statusConectivity;
  }
}

If I put everything inside the provider in the MyApp class, it does call in each of the pages and not just once. Why using the provider only calls once?

You should provide `ConectivityServiceProvider` to your `page.ts` and there call it. — distante, Sep 19 '18 at 07:35
@distante, In case I have many pages I think it was not the best option. — Maicoly Morocho, Sep 20 '18 at 02:00

score 1 · Answer 1 · answered Sep 19 '18 at 09:49

You should check Ionic lifecycle events

From your description looks loke you have 3 options:

ionViewDidLoad - void Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.
ionViewWillEnter - void Runs when the page is about to enter and become the active page.
ionViewDidEnter - void Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.

So depending what is your approach to case when you loose connection you could use ionViewDidLoad to check on every initial load of the page or ionViewWillEnter to check it before every time page is displayed (that includes eg. back operations).

Code in app.component.ts would look like this:

import { ConectivityServiceProvider } from '...'
import { Network } from '.....';

export class MyApp
{
    conectivity: boolean;

    constructor(private provider: ConectivityServiceProvider, public network: Network)
    {
        platform.ready().then(() =>
        {
        });
    }

    ionViewDidLoad()
    {
        this.conectivity = provider.isOnline();
        // call once in all pages
        if(this.conectivity)
        {
            //do someting
        }
        else //do something
        {
        }
    }

}

Thanks @Perfect, but I want the service, check if there is connectivity in all the pages I tried it but it does not work. — Maicoly Morocho, Sep 20 '18 at 01:57

score 1 · Answer 2 · answered Sep 20 '18 at 12:58

Please try angular's HttpInterceptor

An interceptor intercepts each of the API calls in the app.So before each of the API call we can check the status of the connection and handle the code accordingly.

Refer: Capture requests globally in angular 4 and stop if no internet

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

@Injectable()
export class ConectivityServiceProvider implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // check to see if there's internet
        if (!window.navigator.onLine) {
            // if there is no internet, throw a HttpErrorResponse error
            // since an error is thrown, the function will terminate here
            return Observable.throw(new HttpErrorResponse({ error: 'Internet is required.' }));

        } else {
            // else return the normal request
            return next.handle(request);
        }
    }
}

The constructor in the MyApp class, calls the provider only once

2 Answers2