Angular 2通過按鈕訂閱/取消訂閱

我試圖檢查互聯網連接。每當連接丟失時，我想向用戶顯示警報，如果用戶單擊刷新按鈕，我想再次檢查連接...但是當我退訂連接丟失時，我無法再次訂閱。我做錯了什麼？Angular 2通過按鈕訂閱/取消訂閱

constructor(private alertController: AlertController){ 

        let connection = this.checkConnection().subscribe(data => { 
         let alert = this.alertController.create({ 
          title: 'Error', 
          subTitle: "You lost connection !", 
          buttons: [ { 
        text: 'Refresh', 
        handler:() => { 
        connection.subscribe(); 
       }}] 
       }); 

        if(data == false){ 
         alert.present(); 
         connection.unsubscribe(); 
        } 
       } 
       ); 

     checkConnection() { 

        return Observable 
        .interval(500) 
        .map(() => { 
        return navigator.onLine; 
        }); 
       }

UPDATE：

 let refresh$ = new Subject(); 
      let connection$ = refresh$.mergeMap(() => { 
         return Observable 
           .interval(50) 
           .map(() => navigator.onLine) 
           .filter(onLine => !onLine) 
           .take(1); 
         }); 

         refresh$.next(); 

      connection$.subscribe(data => { 
        console.log(data) 

      })

來源

2017-04-01 Tolga Tamer

你在哪裏訂閱？ – echonax

處理程序：（）=> { connection.resubscribe（）; }}]但它沒有工作..任何想法我怎麼能再次訂閱？ –

你能告訴我'resubscribe'的api嗎？你在哪裏找到這種方法？ – echonax

我想你是誤會了如何觀測工作。

當您取消訂閱observable時，作爲觀察者的消費者，您告訴觀察者您不再需要向您發送更多值。這是觀察者推翻價值生產者的信號。所以，取消訂閱是一條單行道 - 沒有回頭路。

但你可能仍然可以實現你想要的。從您的代碼中，似乎有一個navigator.onLine布爾值，您可以檢查以確定您目前是否在線。而且，如果該布爾值爲false，則需要顯示一條提示，告訴用戶它們已斷開連接。另外，似乎您想停止檢查此時的連接，直到用戶單擊「刷新」，然後在那一刻，您想要恢復檢查。

如果我的流量正確，那麼您可以通過使用可觀察鏈來實現。

基本上，你需要多個觀察對象才能獲得所需的效果。

let refresh$ = new Subject(); 
let connection$ = refresh$.mergeMap(() => { 
        // on each refresh, 
        // create a new observable that checks every 50ms, 
        // but only emits if we are not online 
        return Observable 
          .interval(50) 
          .map(() => navigator.isOnline) 
          .filter(isOnline => !isOnline) //only emit a when we go offline 
          .take(1); // just need a single value to notify us to bring up our alert prompt 
        });

所以，在上面的例子中，刷新$是你調用next一個主題（）不管你什麼時候要開始檢查離線連接。您會在第一次檢查時手動撥打refresh.next()，然後在每次按下刷新按鈕時撥打refresh$.next()。

connection$是您可觀察到的，您訂閱的地方，只要它收到一個值就顯示您的警報框。

我可能沒有得到正確的用例正確 - 我不得不根據您提交的代碼進行猜測 - 但希望這可以讓您思考如何實現您想要的結果。

來源

2017-04-01 18:45:02 snorkpete

完美！非常感謝！ –

我糾正了我的代碼，並想嘗試一些東西..但仍然不能讓它工作..我在這裏錯過了什麼？當我訂閱連接時，我應該看到控制檯日誌？ –

直到navigator.online切換爲false（只有在！！navigator.online（即'navigator.online == false'）時纔會發出過濾器運算符，您將不會看到控制檯日誌） – snorkpete

Angular 2通過按鈕訂閱/取消訂閱

回答

相關問題