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

我正在使用此npm库在脱机时提醒最终用户

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

您已脱机。检查你的连接！

这里有闪电战：

很好用-但是我想用这个ngOffline指令打开一个模态，所以我试图从angular 11组件访问该指令，但不确定如何处理，对此的任何帮助都将不胜感激

---

我可以用这个指令从html中打开ngx引导模式吗？

因为

ng offline

模块没有像您所期望的那样导出东西（即，您不能在html文件中没有独立的

NgOfflineDirective

的情况下为您插入一个独立的

NgOfflineDirective来使用），您可以添加这样的块（您使用了
#trigger
来识别您的
ngOnline
元素）：

从'@angular/core'导入{AfterContentChecked，Component，ElementRef，OnDestroy，ViewChild}；
从“rxjs”导入{BehaviorSubject，Subscription}；
从“rxjs/operators”导入{distinctUntilChanged，filter}；
@组件（{…}）
导出类YourClass在ContentChecked、OnDestroy之后实现{
脱机$：BehaviorSubject=新的BehaviorSubject（）；
认购：认购；
@ViewChild（'trigger'）触发器：ElementRef；
构造函数（）{
this.subscription=this.offline$.pipe(
distinctUntilChanged（），
过滤器（（脱机：布尔）=>脱机），
).subscribe（（）=>this.showmodel（））；
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
ngAfterContentChecked（）{
如果(
这个，扳机&&
这个.trigger.nativeElement
) {
this.offline$.next（this.trigger.nativeElement.style.display==“无”）；
}
}
showModal（）{
log（'在此处显示您的模态'）；
}
}
感谢您的回答，因为它是一个角度应用程序-我尝试了您的答案，但改用了hostlistener，但不幸的是无法让它工作-@hostlistener（“window:ngOffline”，[“$event”]）openOfflineModal（）{this.offlineModal.show（）；}好的，但我确实将这一行添加到了您的打字脚本中，并按预期工作。：/它确实会打开一个警报，但不使用我从npm使用的库。您的解决方案也会拾取本地/浏览器网络，而npm上的ngOffline包会检测您是否没有wifi/互联网-我需要使用npm中提到的包打开一个模式上面是一个组件，而不是html-你还有其他建议吗？-我很高兴听到他们，感谢迄今为止的帮助；）我实际上从
ngOffline
的源代码中提取了这一行。看起来有一个额外的URL轮询来检查响应标题。我用你的代码更新了stackblitz，并尝试根据wifi连接隐藏/显示模态-最初是用你的代码-连接到internet时显示模态，但我想在用户断开连接时显示模态-如果你可以分享我的stackblitz链接-我错过了一些小东西，但看不见-非常感谢你迄今为止给我的帮助