Проблемы при преобразовании JavaScript в TypeScript

Question

У меня есть огромная таблица стилей S CSS с некоторыми файлами JS, связанными с ней, от команды UI в моем текущем проекте. Моя задача - преобразовать (повторно использовать) код JS, который они создали, в TypeScript (как приложение в Angular).

Пожалуйста, дайте мне совет, что нужно сделать с кодом ниже сделать это возможным. Не нужно переписывать весь код для меня; если вы можете просто указать, какие действия необходимо выполнить и / или поделиться некоторыми ссылками, вы спасете мою жизнь.

На данный момент я уже добавил объявления свойств и попытался изменить this.element.querySelector на document.querySelector и так далее, но пока ничего не работает…

Весь код (без анимации и до преобразования):

class ChangeButton {
constructor(element) {
  this.element = element;
  this.container = this.element.querySelector('.switch-box-contents');
  this.content = this.element.querySelectorAll('.switch-box-content');
  this.on = this.container.querySelectorAll('.switch-box-content')[0];
  this.off = this.container.querySelectorAll('.switch-box-content')[1];

  this.ChangeButton = this.element.querySelector('.switch-button');
  this.ChangeButtonContainer = this.ChangeButton.querySelector('.switch-button-contents');
  this.textOn = this.element.querySelectorAll('.switch-button-txt')[0];
  this.textOff = this.element.querySelectorAll('.switch-button-txt')[1];

  this.checkbox = this.element.querySelectorAll('.switch-box-content-input');

  this.ngOnInit();
  this.bind();
}

ngOnInit() {
  const height = this.on.clientHeight;
  this.container.style.height = `${height}px`;
  this.off.classList.remove('-hidden');

  const txtHeight = this.textOn.clientHeight;
  this.ChangeButtonContainer.style.height = `${txtHeight}px`;
  this.textOff.classList.remove('-hidden');
}

contentOff() {
  const height = this.on.clientHeight;
  this.on.classList.remove('-active');
  this.off.classList.add('-active');

  anime({
...
  });

  const containerHeight = this.off.clientHeight;
  anime({
...
  });

  const txtHeight = this.textOn.clientHeight;
  anime({
...
  });
}

contentOn() {
  this.on.classList.add('-active');
  this.off.classList.remove('-active');
  anime({
...
  });

  const containerHeight = this.on.clientHeight;
  anime({
...
  });

  anime({
...
  });
}

getCheckbox() {
  const content = this.container.querySelectorAll('.switch-box-content');
  const activeContent = [].map.call(content, (element) => {
    return element;
  }).filter((element) => {
    return element.classList.contains('-active')
  })[0];
  return activeContent.querySelector('.switch-box-content-input');
}

check(currentCheckbox) {
  if(this.element.classList.contains('-select')) {
    currentCheckbox.checked = false;
    this.element.classList.remove('-checked')
  }
}

handleEvent(e) {
  const on = this.ChangeButton.classList.contains('-on');
  switch (e.type) {
    case 'click' :
      const checkbox = this.getCheckbox();
      if(on) {
        this.ChangeButton.classList.remove('-on');
        this.contentOff();
      } else {
        this.ChangeButton.classList.add('-on');
        this.contentOn();
      }
      this.check(checkbox);
      break;
    case 'change' :
      const chekbox = this.getCheckbox();
      if(chekbox.checked) {
        this.element.classList.add('-checked')
      } else {
        this.element.classList.remove('-checked')
      }
      break;
  }
}

bind() {
  this.content.forEach((content) => {
    content.addEventListener('click', () => {})
  });
  this.ChangeButton.addEventListener('click', this, false);
  this.checkbox.forEach((checkbox) => {
    checkbox.addEventListener('change', this, false);
  })
}
}

Answer 1

Похоже, большая часть этого основана на классе и добавляется / удаляется по клику пользователя. Я бы добавил логические значения в ваш файл для каждого из них, а затем использовал бы [ngClass]="boolean ? 'yourClassName' : ''". Затем вы можете добавить прослушиватели событий щелчка, чтобы переключать логические значения, которые, в свою очередь, будут переключать ваши классы.

Например:

<div [ngClass]="boolean ? 'active' : 'inactive'" (click)="boolean = !boolean"></div>

То же самое можно сделать со стилем и индивидуальными атрибутами стиля.

<div [style.height]="boolean ? '10px' : '5px'" (click)="boolean = !boolean"></div>