我希望的是,如果网络不可用,并且用户尝试导航到下一页,ConnectionLost
组件应该存在。
但是,如果没有网络,并且用户不采取任何操作,也就是不导航到第二页,则不应该有连接丢失页面。用户应该停留在当前页面。
为此,我已经实现了 canActivate 守卫,如下所示:
@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
到地址栏
我该怎么解决这个问题? 可以在这里查看示例
产生问题的步骤:
- 点击横幅(按钮)-> URL更改为'/banner'
- 点击品牌(按钮)-> URL更改为'/brand'
- 在那个品牌页面上断开网络连接
- 从浏览器点击后退-> ConnectionLostComponent和url是'/brand',没问题
- 再次点击后退-> ConnectionLostComponent但URL也更改为'/connection-lost'。 这就是我面临的问题。
我只是不想使用'/connection-lost'更新URL,因此在NetworkGuard
中的router.navigate
方法中添加了skipLocationChange: true
选项,但仍然无效。