앵귤러 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

나는 어떻게 관찰 가능한 일을 오해 것 같아요.

관측 대상에서 구독을 취소 할 때 관측 대상을 사용하는 소비자는 더 이상 값이 방출되지 않게 관찰 대상에게 말합니다. 그것은 관찰자가 그 가치관을 파괴 할 수있는 신호입니다. 따라서 구독 취소는 일방 통행 거리입니다. 다시 돌아갈 수 없습니다.

하지만 여전히 원하는 것을 얻을 수 있습니다. 코드에서 현재 온라인 상태인지 여부를 확인할 수있는 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 
        }); 

그래서, 위의 예에서, $를 새로 고침하면 오프라인 연결 확인 시작할 때마다에 옆 부르는 주제()입니다. 첫 번째 확인을 위해 refresh.next()을 수동으로 호출 한 다음 그 후에 새로 고침 버튼을 누를 때마다 refresh$.next()으로 전화하십시오.

connection$은 값을 수신 할 때마다 경고 상자를 표시 할 곳을 구독하는 것을 관찰 할 수 있습니다.

올바른 사용 사례를 얻지 못했을 수 있습니다. 제출 한 코드를 기반으로 추측해야했지만 잘하면 결과를 얻는 방법에 대해 생각해 볼 수 있습니다.