Проблема с переносом кода jQuery в angular 6

Question

Я пытаюсь создать эти часы в моем приложении angular - 6 (установлен jQuery)

Кодовая ссылка

Я пытаюсь нарисовать часы внутри моего кода .ts файла так:

  createClock() {
    var li = document.createElement("li");
    var radius = 6;
    var clockEl =  this.clock.nativeElement
    $(document).ready(function() {
      for(var i=0; i<60; i++) {
        var li = document.createElement("li");
        clockEl.append(li);
      }

    });

Но класс <li> css хочет добавить в мою DOM

Answer 1

Хорошо.Я удалил jQuery и преобразовал весь код в TS

import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-clock',
  template: `<div class="whole-page vertical-middle">
  <div class="vertical-middle__child">     
    <div class="clock">
      <ul class="clock__marks">
          <li *ngFor="let number of numbers"></li>
        </ul>      
      <div class="clock__hands">
        <div #clockHour class="clock__hand clock__hand--hour"></div>
        <div #clockMinute class="clock__hand clock__hand--minute"></div>
        <div #clockSeconds class="clock__hand clock__hand--second"></div>
      </div>      
    </div>

  </div>
</div>`,

  styleUrls: ['./clock.component.scss']
})
export class ClockComponent implements OnInit {
  @ViewChild('clockHour') clockHour: ElementRef
  @ViewChild('clockMinute') clockMinute: ElementRef
  @ViewChild('clockSeconds') clockSeconds: ElementRef

  public numbers = [];
  private radius = 6;

  constructor(private el: ElementRef,
    private renderer: Renderer2) {

    this.clockHour = el.nativeElement;
    this.clockMinute = el.nativeElement;
    this.clockSeconds = el.nativeElement;
    this.numbers = Array(60).fill(1);
  }

  ngOnInit() {
    this.createClock()
  }


  createClock() {
    const currentTime = new Date();
    const second = currentTime.getSeconds() * this.radius;
    const minute = currentTime.getMinutes() * this.radius + Math.floor(second / (this.radius * 10) * 10) / 10;
    const hour = currentTime.getHours() * this.radius * 5 + Math.floor(minute / (this.radius * 2) * 10) / 10;

    this.setClockHands(second, minute, hour)
  }

  setClockHands(second, minute, hour) {
    this.renderer.setStyle(this.clockSeconds.nativeElement, 'transform', 'rotate(' + second + 'deg)')
    this.renderer.setStyle(this.clockMinute.nativeElement, 'transform', 'rotate(' + minute + 'deg)')
    this.renderer.setStyle(this.clockHour.nativeElement, 'transform', 'rotate(' + hour + 'deg)')

    const interval = 1000; //1 second
    let before = new Date();


    setInterval(() => {
      const now = new Date();
      const elapsedTime = now.getTime() - before.getTime(); //Fix calculating in inactive tabs
      const delay = Math.round(elapsedTime / interval);

      second += this.radius * delay;
      for (var i = 0; i < delay; i++) {
        if (((second - i) * this.radius) % (this.radius * 5) === 0) {
          minute += 0.5;
          if (minute % this.radius === 0) {
            hour += 0.5;
          }
        }
      }

      this.renderer.setStyle(this.clockSeconds.nativeElement, 'transform', 'rotate(' + second + 'deg)')
      this.renderer.setStyle(this.clockMinute.nativeElement, 'transform', 'rotate(' + minute + 'deg)')
      this.renderer.setStyle(this.clockHour.nativeElement, 'transform', 'rotate(' + hour + 'deg)')
      before = new Date();
    }, interval);
  }
}

Спасибо за помощь

Answer 2

То, что вы хотите сделать, может сделать только Angular.Но если вы хотите использовать jquery и он уже установлен.Убедитесь, что вы импортируете его в компонент с помощью

import * from 'jquery';
(or)
declare var $: any;

Также убедитесь, что он добавлен в angular.json как

"scripts": ["../node_modules/jquery/dist/jquery.min.js "]