该代码有什么问题？ 我正在尝试在Angular的TS中移动JS代码

Question

我正在尝试在Angular的TypeScript中实现此JavaScript代码，但在某些行下显示红线。

这是原始的JavaScript代码：

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

这是我进行更改并在Angular的TypeScript中实现的示例：

export class NewComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

   openModal() {
    document.getElementById('myModal').style.display = "block";
  }

  closeModal() {
    document.getElementById('myModal').style.display = "none";
  }

   slideIndex = 1;
  showSlides(slideIndex);

   plusSlides(n) {
    this.showSlides(this.slideIndex += n);
  }

   currentSlide(n) {
    this.showSlides(this.slideIndex = n);
  }

   showSlides(n) {
    let i;
    const slides = document.getElementsByClassName("mySlides");
    const dots = document.getElementsByClassName("demo");
    const captionText = document.getElementById("caption");
    if (n > slides.length) {this.slideIndex = 1}
    if (n < 1) {this.slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[this.slideIndex-1].style.display = "block";
    dots[this.slideIndex-1].className += " active";
    captionText.innerHTML = dots[this.slideIndex-1].alt;
  }

}

错误显示在plusSlides(n)行和slides[i].style.display = "none";

对于第一个，它说什么都没有显示红色下划线；对于第二个，它说属性样式在类型“元素”上不存在。 但是我想我在编辑的示例中也犯了其他错误。 因为每次我修复某些内容时，它都会在另一个地方显示另一个新的红色下划线。 如何解决这些问题并在Angular项目中使上述JS代码完全可行？

Answer 1

第二个错误就是抱怨类型。 您可以将“ slides”和“ dots”声明为any ，尽管您可能想找到一个更合适的类型，但是您的代码不会抱怨：

const slides:any = document.getElementsByClassName("mySlides");
const dots:any = document.getElementsByClassName("demo");

关于第一个错误，问题在于以下几行：

slideIndex = 1;
showSlides(slideIndex);

这些线在课堂上做什么？ “ slideIndex”是您要初始化为1的类成员吗？ 还是您正在尝试执行class方法？

如果是后者，则应在类之外，并具有以下内容：

export class NewComponent implements OnInit {

  public slideIndex; // Needed if you want to access this.slideIndex in your methods

  constructor() { }

  ngOnInit() { }

   openModal() { /* ... */  }

  closeModal() { /* ... */ }

   plusSlides(n) { /* ...   */  }

   currentSlide(n) { /* ... */  }

   showSlides(n) { /* ... */  }

}  // Class definition ends here

// Now, using the class you defined by creating a new instance
let greeter = new NewComponent();
let slideIndex = 1;
greeter.showSlides(slideIndex); 

Answer 2

这是因为您尝试调用showSlides(slideIndex); 在声明部分。 你真的不能那样做。 如果要在初始化期间调用某些方法，则应在constructor或ngOnInit 。 除此之外，我没有发现任何可能导致编译问题的内容。 值得注意的是，您应该以角度方式重构此代码。 您自己在进行DOM操作，并且始终有更好的方法来使用Angular