如何在组件中访问 ngOffline 指令而不是 html

Question

我正在使用这个 npm 库 https://www.npmjs.com/package/ng-offline 在离线时提醒最终用户。

<div class="alert alert-danger" ngOffline>You're offline. Check your connection!</div>

stackblitz 在这里：https://stackblitz.com/edit/angular-ngoffline-npm?file=src%2Fapp%2Fapp.component.html

效果很好 - 但是 我想用这个 ngOffline 指令打开一个模式，所以我试图从我的 angular 11 组件中访问该指令，但不知道如何要解决这个问题，我们将不胜感激。

我可以用这个指令从 html 中打开一个 ngx-bootstrap 模式吗？

Answer 1

因为ng-offline 模块没有像您预期的那样导出内容（即，您不能注入一个独立的NgOfflineDirective 供您使用，而无需在您的html 文件中使用它），您可以添加这样的块（您使用#trigger 来识别您的ngOnline 元素）：

import { AfterContentChecked, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';
import { distinctUntilChanged, filter } from 'rxjs/operators';

@Component({ ... })
export class YourClass implements AfterContentChecked, OnDestroy {
  offline$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>();
  subscription: Subscription;

  @ViewChild('trigger') trigger: ElementRef;

  constructor() {
    this.subscription = this.offline$.pipe(
      distinctUntilChanged(),
      filter((offline: boolean) => offline),
    ).subscribe(() => this.showModal());
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  ngAfterContentChecked() {
    if (
      this.trigger &&
      this.trigger.nativeElement
    ) {
      this.offline$.next(this.trigger.nativeElement.style.display === "none");
    }
  }

  showModal() {
    console.log('Show your modal here.');
  }
}