Angular 7 下线了？

Question

我需要关闭所有按钮、点击、超链接，并放置一个带有消息的背景“上网”。我知道这有点粗鲁，但这是必要的。

AppComponent (TS)：可以订阅connectionMonitor来观察网络连通性。

  private onlineObserver(){
    if (isPlatformBrowser(this.platformId)) {
      const offline$ = fromEvent(window, 'offline').pipe(mapTo(false));
      const online$ = fromEvent(window, 'online').pipe(mapTo(true));
      this.connectionMonitor = merge( offline$, online$ );
    } else {
      this.connectionMonitor = empty();
    }
  }

app.component.html：只是整个路由器插座。

<router-outlet></router-outlet>

如何使用 Angular 7 实现这一点？

Answer 1

您可以将路由器插座上的在线标志与 ngIf 一起使用

<router-outlet *ngIf="online$ | async else offline"></router-outlet>
<ng-template #offline>
  content here displays when not online
</ng-template>

或

<router-outlet *ngIf="online$ | async"></router-outlet>
<ng-container *ngIf="offline$ | async">
  content here displays when offline
</ng-container>

Answer 2

ngIf="offline$ | async

ngIf="online$ | async

如果您仍需要显示控件但让它们处于非活动状态，您可以使用ng-template 根据您是否离线加载不同的模板。离线元素没有绑定点击事件，没有hrefs，没有指针事件等。这个问题非常广泛，因此很难根据您提供的信息深入了解您的用例的更多细节。