Перетаскивание и изменение размера изображения с помощью jQuery с Angular9

Question

Я пытался внедрить набор кода jQuery в Angular9. Изображение «книги» можно перетащить в определенную область (скажем, на диаграмму) и сделать его изменяемым в пределах области. См .: http://jsfiddle.net/u0r6zbt3/.

Однако возвращается ошибка ниже:

error TS1144: '{' or ';' expected.
67   $(document).ready(function () {

Есть идеи, как правильно поставить формат jQuery в Angular? Спасибо.

<div id="drag1" class="drag" style="background-position:center;"><img class="img" width="100" src="http://www.bradleysbookoutlet.com/wp-content/uploads/2013/06/bradleys-book-outlet-books-only-logo.png" > </div>

<div id="chartdiv" style="width: 100%; height: 500px">Chart</div>

<footer class="footer">
  <div class="container">
      <span>All Rights Reserved 2020</span>
  </div>
</footer>

js идет сюда:

import { Component, NgZone } from "@angular/core";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import * as $ from 'jquery';
import 'jqueryui';

am4core.useTheme(am4themes_animated);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Employee List'; ...

  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.chart) {
        this.chart.dispose();
      }
    });
  }

  $(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
            stack: '.drag',
            revert: "invalid"
    });

    $("#chartdiv").droppable({
        drop: function (e, ui) {

          if ($(ui.draggable)[0].id != "") {
              x = ui.helper.clone();
              ui.helper.remove();

              x.draggable({
                  //helper: 'original',
                  containment: '#chartdiv',
                  tolerance: 'fit',
                            stack: '.drag'
              });

              x.resizable({
                animate: true,
                 //aspectRatio: 16 / 9,
                helper: "ui-resizable-helper",
                handles: "n, e, s, w, nw, ne, sw,se"
              });

              x.appendTo('#chartdiv');

          }

        }
    });

});

        $(document).mousedown(function(e) {
        console.log($(e.target)[0]);
    // matches all children of droppable, change selector as needed
//    if( $(e.target).is("#droppable .drag") ) {
        if( $(e.target).is("#chartdiv .drag img") ) { // if this then the big book one works as the image is picking up the click
        //$(e.target).find(".ui-resizable-handle").show(); // click on the div
            $(e.target).parent().find(".ui-resizable-handle").show(); // as img is sibling to handles, you need to get the parent, then do the find.
                $("#tools").show();
        }
        else {
            $("#chartdiv").find(".ui-resizable-handle").hide();
                $("#tools").hide();
          }
    });

    $(function(){
        $('#flip').click(function(e){
            $('#chartdiv .img').addClass('drag1');
        });
    });
}

Answer 1

Вы можете написать jQuery код внутри метода ngOnInit, но перед проверкой, является ли jquery глобальным.

В jQuery модуле, jquery .min. js под 'dis' папка не опубликована c. Чтобы сделать jQuery глобальным, перейдите к файлу. angular -cli. json и передайте ссылку на путь к файлу jQuery. Когда мы ссылаемся на путь к файлу внутри приложения Angular, папка root называется 'src'. Тем не менее, jQuery библиотека находится внутри node_modules. Нам нужно определить правильный путь в. angular -cli. json file

../node_modules/jquery/dist/jquery.min.js

Чтобы подтвердить этот путь, go к node_modules → jquery → dist → jquery .min. js. Вы увидите путь, который означает, что вы добавили библиотеку jQuery глобально в это приложение. Не ожидайте, что страница «localhost: 4200» в вашем браузере перезагрузится сама, поскольку файл находится вне папки «src». Чтобы компенсировать эти новые изменения в приложении, мы должны перезапустить это приложение.

Для этого вы можете использовать jquery синтаксис внутренний onInit

export class AppComponent implements OnInit {
  ngOnInit(){
    $(‘button’).click(function(){
    alert(‘Wass up!’);
  });
 }
}

Шрифт - https://blog.bitsrc.io/how-to-use-jquery-with-angular-when-you-absolutely-have-to-42c8b6a37ff9