我想要的是,如果网络不可用,并且用户试图导航到下一页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
发送到地址栏
我怎么能解决这个问题?可以看到样本Here
产生问题的步骤:
我只是不想用'/ connection-lost'来更新网址,因为我在skipLocationChange: true
中为router.navigate
方法添加了NetworkGuard
选项,但它仍然没有用。
我不知道这对你来说是不是正确的解决方案,但我在项目中所做的是遵循。
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的建议是在用户丢失网络后立即显示连接丢失页面。但我的要求是在他/她尝试导航到另一个页面时显示连接丢失页面。
在这个答案中,我刚补充说,那个缺失部分。
为此,我只是从Guard更新了isNetworkStopped
标志,并且因为每个CanActivate警卫在导航开始之前执行。因此,当用户更改路径时,将显示连接丢失组件。
我在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中删除了导航。请参阅下面的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
component是在基于根组件模板的条件下添加的。
app.component.html
<router-outlet *ngIf="!networkService.isNetworkStopped"></router-outlet>
<app-connection *ngIf="networkService.isNetworkStopped"></app-connection>
从ConnectionLost组件,如果用户单击重新加载按钮。通过检查网络连接,我更新了isNetworkStopped
的NetworkService
标志。