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

您想做的事情可以单独由Angular完成。但是如果要使用jquery及其已经安装。利用

将其导入组件中

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

还要确保将其添加到angular.json中

“脚本”：[“ ../node_modules/jquery/dist/jquery.min.js”]

Answer 2

好的。我删除了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);
  }
}

感谢您的帮助

将jQuery代码迁移到angular 6的问题

2 个答案: