2017-02-23 49 views
2

Я работаю с ионным 2 RC1 и использую возвышенный как текстовый редактор. Мне нужно проверить, подключено ли сетевое соединение или нет. поэтому для этой цели я использую ионный родной Network для этой цели. но я столкнулся с проблемой с Network.onDisconnect() Observable. Я редактировал метод initializeApp(), в котором я проверяю подключение к сети и показываю предупреждение, если соединение отключено. я следующий код, написанный в app.component.tsIONIC 2 native Network.onDisconnect() код запуска дважды

showAlert(title, msg) { 
    let alert = this.alertCtrl.create({ 
     title: title, 
     subTitle: msg, 
     buttons: ['OK'] 
    }); 
    alert.present(); 
    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     let disconnectSubscription = Network.onDisconnect().subscribe(() => { 
     this.showAlert("Error", "No internet connection"); 
     }); 
     StatusBar.styleDefault(); 
    }); 
    } 

Проблема я столкнулся в том, что предупреждение показывается дважды, если приложение отключен от Интернета. Я нашел аналогичную проблему в этом post, но она осталась без ответа. Любая помощь в этом отношении будет высоко оценена. Спасибо заранее!

+0

в состоянии решить эту проблему, были вы? – sebaferreras

+1

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

ответ

5

Чтобы избежать этого, вы можете сообщить об этом событиям и просто сделать что-то, когда государство переходит из сети в автономный режим или из автономного режима в онлайн (и не каждый раз, когда событие запускается плагином) , Так что в принципе вы можете создать службу для обработки всей этой логики, как это:

import { Injectable } from '@angular/core'; 
import { Network } from 'ionic-native'; 
import { Events } from 'ionic-angular'; 

export enum ConnectionStatusEnum { 
    Online, 
    Offline 
} 

@Injectable() 
export class NetworkService { 

    private previousStatus; 

    constructor(private eventCtrl: Events) { 
     this.previousStatus = ConnectionStatusEnum.Online; 
    } 

    public initializeNetworkEvents(): void { 
     Network.onDisconnect().subscribe(() => { 
      if (this.previousStatus === ConnectionStatusEnum.Online) { 
       this.eventCtrl.publish('network:offline'); 
      } 
      this.previousStatus = ConnectionStatusEnum.Offline; 
     }); 
     Network.onConnect().subscribe(() => { 
      if (this.previousStatus === ConnectionStatusEnum.Offline) { 
       this.eventCtrl.publish('network:online'); 
      } 
      this.previousStatus = ConnectionStatusEnum.Online; 
     }); 
    } 
} 

Таким образом, наши пользовательские события (network:offline и network:online) будет срабатывать только тогда, когда соединение поистине изменения (закрепляющий сценарий, когда несколько онлайн или оффлайн события запускаются плагином, когда состояние соединения не изменилось вообще).

Затем в файле app.component вам просто нужно, чтобы подписаться на наши пользовательские события:

// Offline event 
this.eventCtrl.subscribe('network:offline',() => { 
    // ...    
}); 

// Online event 
this.eventCtrl.subscribe('network:online',() => { 
    // ...    
}); 
+0

Это все еще срабатывает дважды для меня – Mike

+1

Есть много таких решений, которые предоставляются в качестве ответов на этот вопрос во многих сообщениях в Интернете. Это, безусловно, самый элегантный ответ. Однако это не сработает, как другие решения не работают (я их пробовал). Событие, похоже, срабатывает несколько раз одновременно или срабатывает быстрее, чем предыдущий код может выполнять и фильтровать лишние события в сети. – JurgenW

+0

Хм ... Я использую код выше в нескольких приложениях и никогда не сталкивался с этой проблемой. Если есть только один экземпляр «NetworkService», даже если событие плагина запускается очень быстро, оно должно обрабатываться логикой службы @JurgenW. – sebaferreras

0

Я решил эту проблему. Реальная проблема, с которой сталкиваются люди, заключается в том, что во многих случаях создаются несколько экземпляров ионических страниц. Поэтому, если вы зарегистрируете приемник событий на странице и затем начнете навигацию вперед и назад через приложение, приемник событий будет зарегистрирован несколько раз. Решение добавить приемник событий в app.component.ts «ы метод intializeApp, например, так:

// top of page 
import { Observable } from 'rxjs/Observable'; 

initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     this.statusBar.styleDefault(); 
     this.splashScreen.hide(); 

     var offline = Observable.fromEvent(window, "offline"); 
     var online = Observable.fromEvent(window, "online"); 

     offline.subscribe(() => {   
      console.log('Offline event was detected.'); 
     }); 

     online.subscribe(() => { 
      console.log('Online event was detected.');   
     }) 
    }); 
    } 

Оба сообщения журнала будет срабатывать только один раз, когда вы идете онлайн/оффлайн, соответственно, независимо от того, как много вы ориентируетесь в приложении.

+0

* Таким образом, если вы зарегистрируете приемник событий на странице и затем начнете навигацию взад и вперед через приложение, приемник событий будет зарегистрирован несколько раз * Это верно только в том случае, если пользователи не отписываются от событий при выходе из страницы (что неверно, но это не имеет никакого отношения к плагину). Рекомендуется использовать это в файле 'app.component.ts' или в общей службе, но он должен работать правильно, если вы ** делаете что-то правильно ** на любой странице приложения. – sebaferreras

0

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

import { Network } from 'ionic-native'; 

    @Injectable() 
    export class NetworkService { 
    previousStatus:any 
     constructor() { 

     }  

    showAlert(title, msg) { 
     let alert = this.alertCtrl.create({ 
      title: title, 
      subTitle: msg, 
      buttons: ['OK'] 
     }); 
     alert.present(); 
     }   
      this.initializeApp(); 
      this.network.onDisconnect().subscribe(() => { 
       if (this.previousStatus === Online) { 
        this.showAlert("Error", "No internet connection"); 
       } 
       this.previousStatus = Offline; 
      }); 
      Network.onConnect().subscribe(() => { 
       if (this.previousStatus === Offline) { 
       this.showAlert("Alert", "Network was connected"); 
       } 
       this.previousStatus = Online; 
      }); 
     } 
    } 
Смежные вопросы