Angular 2通过按钮订阅/取消订阅

Question

我试图检查互联网连接。每当连接丢失时，我想向用户显示警报，如果用户单击刷新按钮，我想再次检查连接...但是当我退订连接丢失时，我无法再次订阅。 我做错了什么？

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) 

      }) 

Answer 1

我想你是误会了如何观测工作。

当您取消订阅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$是您可观察到的，您订阅的地方，只要它收到一个值就显示您的警报框。

我可能没有得到正确的用例正确 - 我不得不根据您提交的代码进行猜测 - 但希望这可以让您思考如何实现您想要的结果。