Использование JavaScript с Angular Component: Невозможно прочитать свойство 'id' из null

Question

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

Я подключил мой src/custom.js файл к своему app.component.html до angular.json, как показано ниже:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],

"scripts": [
   "node_modules/jquery/dist/jquery.js",
   "node_modules/bootstrap/dist/js/bootstrap.js",
   "src/custom.js"
]

Контекст: Демонстрационный скрипт - это простое оповещение с надписью «Привет», которое появляется каждый раз, когда я подключаюсь к своему локальному хосту. Насколько я знаю, нет проблем с внешним файлом js, на который ссылаются.

Кажется, моя проблема связана с более сложными функциями. Вот пример, который я пытаюсь реализовать из w3schools.

И он настроен следующим образом:

<!-- app.component.html -->

<div id="mydiv">
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>

// custom.js 

dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
     document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
     elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX; pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX; 
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX; 
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Ошибка: Невозможно прочитать свойство 'id' для null в dragElement (custom. js: 13) в custom. js: 6

Ранее я уже сталкивался с подобной ошибкой. Я подозреваю, что это как-то связано с загрузкой DOM против запуска js?

К сожалению, я очень плохо знаком с Angular, не имея опыта настройки основных веб-страниц c.

У кого-нибудь есть понимание?

Answer 1

Вы можете пометить свой элемент DOM с помощью #someTag, а затем получить его с помощью @ViewChild ('someTag').