Внедрение кода JS в приложение Angular

Question

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

К сожалению, мне неудобно внедрять код JS и jQuery в файлы.ts. Например: http://jsfiddle.net/Jjgmz/1/

Этот код реализует перетаскиваемый, и это просто в 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, что вы используете Jquery в вашем Компоненте.

Например, используя jssha lib в Angular

Первый шаг

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

Шаг второй Добавьте файл скриптов jssha в файл.angular-cli.json

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

Шаг третий Добавление переменной в компонент для использования в качестве глобальной переменной

//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