Как настроить таргетинг и изменение всех элементов CSS в приложении Ionic / Angular?

Question

Я пытаюсь обновить div с помощью queryselector и .innterhtml для отображения в представлении, когда приложение теряет подключение к сети.Javascript отлично работает в первом представлении, которое загружает div, но на следующих страницах не отображается 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 для мониторинга подключения.

Вместо этого вы должны использовать плагин Ionic Native, называемый Network, который предоставляет эту информацию кросс-устройству, дружественному к Angular-способу:

• Сеть - Ионная документация

Таким образом, вы могли бы вставить некоторый код следующим образом:

// 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. Приведенный выше фрагмент кода требует от вас понимания модулей, наблюдаемых и множества понятий, и неясно, с чего мне начинать объяснять, исходя из того, что вы уже сказали. Я надеюсь, что это поможет вам начать свой путь к ее решению.