Javascript 如何处理Angular 7中的连接丢失页面？

我想要的是，如果网络不可用，并且用户尝试导航到下一页

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;
  }
}

@可注入({
providedIn:'根'
})
导出类NetworkGuard实现CanActivate{
构造器（专用路由器：路由器，专用网络：网络服务）{
}
canActivate（下一步：ActivatedRouteSnapshot，
状态：RouterStateSnashot）：可观察的|承诺|布尔| UrlTree{
if（window.navigator.onLine）{
返回true；
}否则{
如果（！this.isConnectionLostComponent（））{
this.router.navigate（['/connection lost']，{skipLocationChange:true}）；
}
返回false；
}
}
私有isConnectionLostComponent（）{
//检查是否添加了连接丢失组件
返回this.network.isActive；
}
}

除了一个条件外，它工作正常。 也就是说，如果我在浏览器中单击“后退”或“前进”，其更新URL

与地址栏的连接将丢失

我怎样才能解决这个问题？ 你能看到样品吗

生成问题的步骤：

单击横幅（按钮）->URL更改为“/banner”

单击品牌（按钮）->URL更改为“/brand”

断开该品牌页面上的网络连接

从浏览器->ConnectionLostComponent中单击后退，url为“/brand”，没关系

再次单击后退->ConnectionLostComponent，但url也更改为“/connection lost”。这就是我面临的问题

---

我只是不想用“/connection lost”来更新URL，因为我在

路由器中添加了
skipLocationChange:true
选项。在
NetworkGuard
中导航
方法，但它仍然不起作用。
我不知道这是正确的解决方案还是不适合您，但我在我的项目中所做的工作如下

app.component.ts

app.component.html

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



让我知道它是否按照您需要的方式运行。
在一点搜索之后，并借助@AlokeT的答案。我找到了解决这个问题的办法

@AlokeT的建议是，当用户失去网络时，立即显示连接丢失页面。但我的要求是在他/她尝试导航到另一个页面时显示连接丢失页面

在这个回答中，我刚刚补充了，缺失的部分

为此，我只是从Guard更新了
isNetworkStopped
标志，因为每个CanActivate Guard都是在导航开始之前执行的。因此，当用户更改路径时，将显示连接丢失组件

我在NetworkGuard中使用了一个
NetworkService
代码

@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中删除了导航。
请参见下面的my，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组件。通过检查网络连接，我更新了
网络服务的
标志
 您可以存储上次访问的URL，如果用户返回该URL，那么是否可以防止您的情况？除此之外，您不能做很多事情，因为浏览器禁止您知道用户是否单击了“后退”按钮。@trichetriche我可以检查上次访问的URL，但如何防止用户返回，直到他/她联机，并且我在isConnectionLostComponent（）方法中添加了类似的条件，请检查我更新的问题。这是一个很好的答案，我以前尝试过，但这次我想在导航上显示“应用程序无网络”组件。没有用户断开网络连接的速度快。顺便问一下，这样做有什么好处？我只是想知道@如果没有网络，用户可以看到当前页面内容。采取行动是次要的。@AlokeTSo您可以制作一个透明的覆盖，并在没有网络时激活它，这样用户只能看到内容，但不能做任何事情。同时添加名为
的属性
show
，该属性将像YouTube在其android应用程序上所做的那样显示页面的小更改。但我必须在没有internet的情况下显示连接中断用户界面。既然networkService已经有“online”属性，为什么它仍然需要isNetworkStopped标志？是的，@peant这是真的，但当用户导航到另一个组件时，我将更改此（isNetworkStopped）标志。这样，用户可以在更改路由时看到连接丢失的组件，而不是在连接丢失时立即看到。这是我的主要要求。
@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;
  }
}

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