javascript - 如何定位和修改 Ionic/Angular 应用程序中 CSS 元素的所有实例？

Question

我正在尝试使用 queryselector 和 .innterhtml 更新一个 div，以便在应用程序失去网络连接时显示在 View 中。 javascript 在加载 div 的第一个 View 上工作正常，但以下页面在加载时不显示 div。

是不是因为 .addEventListener 在调用后自己移除了？

我试过使用 queryselectorAll，并尝试从使用 CSS ID 切换到 .class 声明。

我也尝试过为每个页面完全复制网络连接代码，但没有成功，而且似乎效率很低。

当我删除第一个 DIV 实例时，第二个 DIV 实例开始工作。

app.component.ts

window.addEventListener('offline', () => {
    //Do task when no internet connection
    console.log("OFFLINE");
    document.querySelector('.offline').innerHTML = 'You are currently Offline...';
});

window.addEventListener('online', () => {
    //Do task when no internet connection
    console.log("ONLINE");
    var x = document.querySelectorAll(".offline");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].innerHTML = 'You are Online!';
    }
});

login.page.html ---> 当这个工作时

<div class="offline" style="color:red; text-align: center"></div>

welcome.page.html ---> 这行不通

<div class="offline" style="color:red; text-align: center"></div>

details.page.html ---> 这行不通

<div class="offline" style="color:red; text-align: center"></div>

我希望应用在用户访问任何和所有页面时显示网络处于离线状态。到目前为止，它只对用户加载的第一个页面始终如一地执行此操作。

Answer 1

您误解了 Angular/Ionic 的基本架构。

您不应该像这样在 HTML 中四处寻找。

使用 Angular，您可以构建组件，然后构建数据模型来驱动它。实际上不得不触摸 html 被认为是“失败”。

相反，你应该有这样的东西:

<div>
  <p *ngIf="IsOnline">I'm online</p>
  <p *ngIf="!IsOnline">I'm offline</p>
</div>

然后在后台设置 IsOnline 变量。

您不使用 window.addEventListener('offline', api 类型代码来监视连接。

相反，您应该使用名为 Network 的 Ionic Native 插件，它以跨设备、Angular 友好的方式公开此信息:

• > Network - Ionic Documentation

所以你会像这样输入一些代码:

// watch network for a disconnection
let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
  console.log('network was disconnected :-(');
});

// stop disconnect watch
disconnectSubscription.unsubscribe();


// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!');
  // We just got a connection but we need to wait briefly
   // before we determine the connection type. Might need to wait.
  // prior to doing any api requests as well.
  setTimeout(() => {
    if (this.network.type === 'wifi') {
      console.log('we got a wifi connection, woohoo!');
    }
  }, 3000);
});

// stop connect watch
connectSubscription.unsubscribe();

此代码不会直接加入您的元素，我只是想向您展示您应该采取的方向。

您似乎是从头开始，所以您真正需要做的是了解更多关于 Angular/Ionic 的知识。上面的代码片段需要您了解模块、可观察对象和许多概念，根据您目前所说的，我不清楚应该从哪里开始解释。不过，我希望这可以帮助您开始解决问题的途径。