انگولار - جاوااسکریپت اضافه کردن کلاس اگر مقدار localStorage وجود دارد بدون بارگذاری مجدد صفحه

من روی Ionic 5 و Angular کار میکنم و نیاز دارم که DOM نمایم را بعد از باز شدن یک مودال تغییر دهم. مشکل این است که برای دیدن تغییرات DOM، مجبورم نمایم را دوباره بارگذاری کنم، و نیاز دارم که بدون هیچ بارگذاریای تغییر کند.

گام اول=اضافه کردن کلید و مقدار در LocalStorage و نمایش مودال هنگام کلیک روی عنصر.

گام دوم=من نیاز دارم که هنگام بسته شدن مودال، addClass('hide') روی دیوها اعمال شود.

نکتهای برای اعمال این تغییرات بدون بارگذاری مجدد صفحه وجود دارد؟

کد 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');
}

}

پاسخ شماره ۱

من معتقدم در این مورد میتوانید از setInterval استفاده کنید تا همیشه بررسی کنید که آیا localStorage مقدار مورد نظر را دارد و محتوای صفحه را بدون نیاز به بارگذاری مجدد تغییر دهید.

در اینجا یک مثال آورده شده است، معمولاً میتوانید به setInterval یک بازه زمانی (بر حسب میلیثانیه) بدهید، اما بدون آن، این تابع همیشه به طور مداوم بهروزرسانی خواهد شد اگر if شرط شما را برآورده کند.

setInterval(() => {

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

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

})