将 jQuery 代码迁移到 Angular 6 的问题答案

【问题标题】：Issue with migrating jQuery code to angular 6将 jQuery 代码迁移到 Angular 6 的问题
【发布时间】：2018-11-23 03:25:56
【问题描述】：

我尝试在我的 Angular - 6 应用程序（安装 jQuery）中创建这个时钟

Codepen link

我正在尝试在我的 .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

【问题讨论】：

任何控制台错误？
如果您使用的是 Angular，为什么不直接将值附加到数组并改用 *ngFor 呢？在 Angular 应用中，手动创建 DOM 元素几乎从来都不是正确的答案。
@JohnMontgomery 几乎从来没有 0.00001% 的案例 ;)
如果你必须在 angular 中使用 jquery，你没有正确使用 angular

标签： css angular

【解决方案1】：

你想做的事情可以由 Angular 单独完成。但是如果你想使用 jquery 并且它已经安装好了。使用你在组件中导入它使用

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

还要确保它在 angular.json 中添加为

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

【讨论】：

【解决方案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);
  }
}

感谢您的帮助

【讨论】：