如何在组件中访问 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.');
  }
}

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

How can I access ngOffline directive in a component instead of html

npm

offline

angular-directive

angular11