Перепишите функцию jQuery на Angular 9

Question

Я новичок в Angular и в настоящее время пытаюсь переписать код jQuery, который я использую для загрузки моего скрипта"classycountdown". Это функция jQuery, которую я хочу перевести:

$(document).ready(function() {
  var remainingSec = $('.countdown').data('remaining-sec');
  $('.countdown').ClassyCountdown({
        theme: "flat-colors-very-wide",
        end: $.now() + remainingSec
    });
    });

Это html, где он используется:

<div class="countdown" 
[attr.data-remaining-sec]="toSec.seconds">
</div>

, и это часть кода компонента для переменной toSe c:

export class AppComponent implements OnInit {
....
    toSec = {
        seconds: this.scnds
      }
}

Причина, по которой я хочу преобразовать его в Angular, заключается в том, что функция не работает при первой загрузке страницы, что, как я предполагаю, связано с тем, что представление еще не загружен, и когда он проходит через этот оператор: var ОстающийсяSe c = $ ('. countdown'). data ('Остающийся-se c'); при первой загрузке ничего не находит. Однако, как только я нажму refre sh, он начнет работать. Кроме того, по какой-то причине у меня не было этой проблемы, когда я тестировал его на localhost, он начал отображаться только тогда, когда я развернул его на сервере.

Любой ввод приветствуется!

Answer 1

Создайте наблюдаемое, которое испускает желаемый обратный отсчет

timer$ = timer(1000, 1000).pipe(
  take(10), 
  map(val => 10 - val)
);

таймер (1000, 1000) выдает возрастающие числа каждую секунду, take (10) - это количество, которое вы хотите испустить, а map заставляет его отсчет с десяти. У вас должна быть возможность поиграть с этим, чтобы получить значения, от которых вы хотите отсчитывать.

и в шаблоне используйте конвейер asyn c для отображения выданных значений.

{{ timer$ | async }} left to go

Вот чистая JS демонстрация наблюдаемого таймера.

const { timer } = rxjs;
const { take, map } = rxjs.operators;

timer(1000, 1000).pipe(
  take(10),
  map(val => 10 - val)
).subscribe(time => { console.log(time); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.2/rxjs.umd.min.js"></script>

Answer 2

Используйте ловушку жизненного цикла компонента angular OnAfterViewInit вместо do c ready. Наверное, не пытайтесь переписать это в angular, это будет большая работа с небольшим выигрышем.

import $ from "jquery";

export class AppComponent implements OnAfterViewInit {
  constructor() {}
  
  ngOnAfterViewInit() {

    const remainingSec = $('.countdown').data('remaining-sec');
    
    $('.countdown').ClassyCountdown({
       theme: "flat-colors-very-wide",
       end: $.now() + remainingSec
    });

  }
}