angular - Javascript προσθήκη κλάσης αν υπάρχει τιμή στο localStorage χωρίς επαναφόρτωση της σελίδας

Δουλεύω με Ionic 5 και Angular και χρειάζομαι να αλλάξω το DOM της προβολής μου μετά από ένα αναδυόμενο παράθυρο modal. Το πρόβλημα είναι ότι πρέπει να ξαναφορτώσω την προβολή για να δω τις αλλαγές στο DOM, και χρειάζομαι να αλλάζει χωρίς καμία επαναφόρτωση.

Πρώτο βήμα=πρόσθεσε κλειδί και τιμή στο LocalStorage και εμφανίζεται ένα modal όταν γίνεται κλικ στο στοιχείο.

Δεύτερο βήμα=Χρειάζομαι να προσθέσω addClass('hide') στις div όταν το modal κλείνει.

Έχεις κάποιες συμβουλές για να κάνεις αυτές τις αλλαγές χωρίς να ξαναφορτώσεις τη σελίδα;

Κώδικας HTML :

    <div class="circleImgContainer">
  <img class="suivezLaRecoImg" src="../assets/imgs/muscu_cardio/[email " alt="">
  <img class="demarrerVosRepImg hide" (click)="goReps()" src="../assets/imgs/muscu_cardio/[email " alt="">
</div>

Τς :

  ngOnInit() {
let content = document.querySelector(".circleImgContainer");

if (localStorage.getItem('serie_1') == 'true') {
  content.classList.add('hide');
}

}

Απάντηση #1

Πιστεύω ότι σε αυτή την περίπτωση μπορείτε να χρησιμοποιήσετε το setInterval για να ελέγχετε πάντα αν ένα localStorage έχει την επιθυμητή τιμή και να αλλάζετε το περιεχόμενο της σελίδας χωρίς να χρειάζεται να ανανεώσετε.

Ακολουθεί ένα παράδειγμα παρακάτω, κανονικά μπορείτε να παρέχετε στο setInterval ένα χρονικό διάστημα (σε χιλιοστά του δευτερολέπτου), αλλά χωρίς αυτό, θα ανανεώνεται συνεχώς αν η δήλωση if ταιριάζει με την καθορισμένη συνθήκη σας.

setInterval(() => {

  ngOnInit() {
    let content = document.querySelector(".circleImgContainer");

    if (localStorage.getItem('serie_1') == 'true') {
      content.classList.add('hide');
    }
  }

})