Как обрабатывать страницу потери соединения в Angular 7?

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

app.component.ts

constructor(){
this.onlineOffline = Observable.merge(of(navigator.onLine),
      fromEvent(window, 'online').pipe(map(() => true)),
      fromEvent(window, 'offline').pipe(map(() => false))
    );
}

app.component.html

<ng-container *ngIf = "onlineOffline | async; then thenTemplate; else elseTemplate"></ng-container>
<ng-template #thenTemplate>
 <router-outlet></router-outlet>
</ng-template>
<ng-template #elseTemplate>
  <app-no-network></app-no-network>
</ng-template>

Дайте мне знать, работает ли он так, как вам нужно, или нет.

После небольшого поиска и с помощью ответа @AlokeT. Я получил решение этой проблемы.

Предложение @AlokeT показывает страницу потери соединения, как только пользователь потерял свою сеть. но мое требование состоит в том, чтобы показать эту страницу потери соединения, когда он/она пытается перейти на другую страницу.

И в этом ответе я просто добавил недостающую часть.

Для этого я просто обновляю этот флаг isNetworkStopped из Guard, и потому что каждый Guard CanActivate выполняется до начала навигации. Таким образом, компонент потери соединения будет отображаться, когда пользователь меняет путь.

Есть код NetworkService, который я использую в NetworkGuard,

@Injectable({providedIn: 'root'})
export class NetworkService {

  online: boolean;
  isNetworkStopped = false;

  constructor() {
    this.online = window.navigator.onLine;

    fromEvent(window, 'online').subscribe(e => {
      this.online = true;
    });

    fromEvent(window, 'offline').subscribe(e => {
      this.online = false;
    });
  }
}

Здесь в приведенном выше коде я просто добавил флаг isNetworkStopped. И обновил этот флаг с NetworkGuard, что означает, что пользователь пытается перейти на следующую страницу и не находит сети.

А также убрал навигацию из NetworkGuard. Смотрите мой ниже, обновленный код NetoworkGuard

@Injectable({providedIn: 'root'})
export class NetworkGuard implements CanActivate {
  constructor(private network: NetworkService) {
  }

  canActivate(next: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.network.online) {
      return true;
    }
    this.network.isNetworkStopped = true;
    return false;
  }
}

И на основе этого флага мне удалось показать компонент ConnectionLost. Для этого ConnectionLostкомпонент добавляется по условию на основе шаблона корневого компонента.

app.component.html

<router-outlet *ngIf = "!networkService.isNetworkStopped"></router-outlet>
<app-connection *ngIf = "networkService.isNetworkStopped"></app-connection>

И из компонента ConnectionLost, если пользователь нажимает кнопку перезагрузки. Проверив сетевое соединение, я обновил флаг isNetworkStoppedNetworkService.