如何在Angular组件中访问ngOffline指令 实现离线模态弹窗触发

核心实现逻辑 #

完全复用ngOffline指令内置的网络状态判断能力，无需在组件类中重复编写浏览器online/offline事件的监听逻辑，所有状态绑定操作在模板层完成，不需要手动解析指令实例。

具体实现步骤 #

• 在当前组件所在的模块中，确认已正确导入NgOfflineModule、ngx-bootstrap的ModalModule，保证模板可正常解析对应指令和组件。
• 新增一个用于托管ngOffline指令的隐藏DOM节点，给节点加上模板引用变量，该节点本身设置为不可见，不占用页面布局空间。
• 直接读取指令暴露的公开isOffline状态属性，将其与ngx-bootstrap模态的[open]输入属性做模板层绑定，实现状态的自动同步。
• 模态的内容直接替换原静态提示的文案，保留必要的手动关闭按钮即可。

示例模板代码 #

<!-- 托管ngOffline指令的隐藏元素 -->
<div 
  ngOffline 
  #offlineRef="ngOffline"
  class="position-absolute invisible"
></div>

<!-- 离线模态内容 -->
<ng-template #offlineModalTpl>
  <div class="modal-header">
    <h4 class="modal-title">网络连接提示</h4>
    <button type="button" class="close" (click)="offlineModalRef.hide()">
      <span>&times;</span>
    </button>
  </div>
  <div class="modal-body">
    当前处于离线状态，请检查网络连接后重试。
  </div>
</ng-template>

<!-- 绑定状态的模态组件 -->
<bs-modal
  [open]="offlineRef?.isOffline && !hasUserClosedModal"
  [modal]="offlineModalTpl"
  #offlineModalRef="bs-modal"
  (onHidden)="markModalClosed()"
></bs-modal>

轻量组件类补充逻辑（适配防重复弹窗需求） #

仅需几行代码处理用户手动关闭后的防打扰逻辑，无需编写网络状态监听：

// 标记用户是否手动关闭过离线模态
private hasUserClosedModal = false;

markModalClosed() {
  this.hasUserClosedModal = true;
  // 网络恢复时重置标记，下次离线时重新弹窗
  if (!this.offlineRef?.isOffline) {
    this.hasUserClosedModal = false;
  }
}

常见适配说明 #

• ngOffline指令本身设置了exportAs: 'ngOffline'，因此模板中通过#变量名="ngOffline"的方式可以直接拿到指令的实例和公开属性，不需要在组件类里做任何依赖注入的操作，完全规避了之前尝试访问指令找不到实现路径的问题。
• 适配Angular 11版本时，ngx-bootstrap 6.x/7.x版本的模态组件均原生支持[open]输入属性的绑定，无需手动调用show()/hide()方法触发模态。
• 原有的静态离线提示区块可以直接删除，避免和弹窗内容重复展示。

内容的提问来源于stack exchange，提问作者tercou1