Question

我已经完成了大量的角度教程，我觉得组件，服务，表格都很舒服..

不幸的是，我不习惯将JS和jQuery代码实现到.ts文件中。例如：http://jsfiddle.net/Jjgmz/1/

这段代码实现了draggable，在Jquery中很简单。你如何将这个JS代码翻译成一个组件？

这就是我尝试过的。

export class TextComponent implements OnInit {

  box;
  drag = {
    elem: null,
    x: 0,
    y: 0,
    state: false
  };
  delta = {
    x: 0,
    y: 0
  };

  constructor() { }

  ngOnInit() {
    this.box = $(this);
    $(this).mousedown(function (e) {
      console.log("down");
      if (!this.drag.state) {
        this.drag.elem = this;
        this.style.backgroundColor = '#f00';
        this.drag.x = e.pageX;
        this.drag.y = e.pageY;
        this.drag.state = true;
      }
      return false;
    });
    $(document).mousemove(function (e) {
      console.log("move");
      if (this.drag.state) {
        this.drag.elem.style.backgroundColor = '#f0f';
        this.delta.x = e.pageX - this.drag.x;
        this.delta.y = e.pageY - this.drag.y;
        $('#log').text(e.pageX + ' ' + e.pageY + ' ' + this.delta.x + ' ' + this.delta.y);
        var cur_offset = $(this.drag.elem).offset();
        $(this.drag.elem).offset({
          left: (cur_offset.left + this.delta.x),
          top: (cur_offset.top + this.delta.y)
        });
        this.drag.x = e.pageX;
        this.drag.y = e.pageY;
      }
    });
    $(document).mouseup(function () {
      if (this.drag.state) {
        this.drag.elem.style.backgroundColor = '#808';
        this.drag.state = false;
      }
    });
  }
}

这不起作用。我不确定JS是否打算以这种方式使用。我能想到的另一个选择是向元素添加（mousedown），（mousemove）..指令，尝试以这种方式实现函数。

实际上，我正在询问将JS实现为angular的实践。 JS应该完全重写吗？这听起来很费时间。有更简洁的方式吗？

Answer 1

这不是这样做的方法。您需要告诉Angular您在Component中使用Jquery。

例如 - 在Angular中使用jssha lib

第一步

npm install jssha --save [using jssha for this demo]

第二步 在.angular-cli.json文件中添加jssha脚本文件

"scripts": [ "../node_modules/jssha/src/sha.js" ]

第三步 添加要用作全局变量的组件中的var

//using external js modules in Angular
declare var jsSHA: any;
shaObj:any;
hash:string; // the below code will go after ngAfterInit
this.shaObj = new jsSHA("SHA-512", "TEXT");
this.shaObj.update("This is a Test");
this.hash = this.shaObj.getHash("HEX")

如果上述剂量确定

在你的案例中，你需要在你的组件中放置一些模板参考，然后使用View Child访问元素，然后在ngAfterViewInit中引用

像

这样的东西

<div #ref><div>

@ViewChild('ref') myref : ElementRef;

then use this myRef to apply the necessary Javascript

将JS代码实现到Angular app

1 个答案: