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

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

0 голосов
/ 18 февраля 2019

Что мне нужно, так это, если сеть недоступна, и пользователь пытается перейти на следующую страницу. ConnectionLost Компонент будет там.

Но если нет сети, а пользователь не делаетвыполнить любое действие означает не переходить на вторую страницу.тогда не должно быть страницы с потерей соединения.Пользователь должен оставаться на текущей странице.

Для этого я реализовал canActivate guard в виде следующего кода: 

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

  canActivate(next: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (window.navigator.onLine) {
      return true;
    } else {
      if (!this.isConnectionLostComponent()) {
        this.router.navigate(['/connection-lost'], {skipLocationChange: true});
      }
      return false;
    }
  }

  private isConnectionLostComponent() {
    // check whether connection lost component is added on not
    return this.network.isActive;
  }
}

Работает нормально, за исключением одного условия.То есть, если я нажимаю назад или вперед из браузера, его URL обновления connection-lost к адресной строке

Как я могу решить эту проблему?Можно посмотреть пример Здесь

шагов для создания проблемы:

  1. Нажмите баннер (кнопка) -> URL-адрес изменить на '/banner '
  2. Нажмите бренд (Кнопка) -> смените URL на' / brand '
  3. Отключите сеть на странице этого бренда
  4. Нажмите обратно из браузера-> ConnectionLostComponent и URL-адрес будет«/ brand», ничего страшного
  5. Нажмите еще раз -> ConnectionLostComponent, но URL-адрес также изменился на «/ connection-lost».это то, что я сталкиваюсь с проблемой.

Я просто не хочу обновлять URL-адрес с помощью '/ connection-lost', для этого я добавил опцию skipLocationChange: true в метод router.navigate в NetworkGuard, но все же это не такработа.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

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

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

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

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

Существует код 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, если пользователь нажимает кнопку перезагрузки.При проверке сетевого подключения я обновил isNetworkStopped флаг NetworkService.

0 голосов
/ 19 февраля 2019

Я не знаю, подходит ли вам это решение или нет, но то, что я сделал в своем проекте, следующее:

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>

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

...