gpt4 book ai didi

javascript - 如何处理 Angular 7 中的连接丢失页面?

转载 作者:数据小太阳 更新时间:2023-10-29 04:39:35 25 4
gpt4 key购买 nike

我想要的是,如果网络不可用,并且用户尝试导航到下一页 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-lostaddress bar

我该如何解决这个问题?可以看 sample Here

产生问题的步骤:

  1. 点击横幅(按钮)-> URL 更改为“/banner”
  2. 点击品牌(按钮)-> URL 更改为“/品牌”
  3. 断开该品牌页面上的网络
  4. 从浏览器点击返回-> ConnectionLostComponent 并且 url 是'/brand',没关系
  5. 再次单击返回 -> ConnectionLostComponent 但 url 也更改为“/connection-lost”。这就是我面临的问题。

我只是不想用“/connection-lost”更新 URL,因为我在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>

让我知道它是否按照您需要的方式工作。

关于javascript - 如何处理 Angular 7 中的连接丢失页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54750157/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com