classList.toggle()在IE11中不起作用 Angular 7（无效的调用对象）

9 浏览
0 Comments

classList.toggle()在IE11中不起作用 Angular 7（无效的调用对象）

我刚刚在IE11上测试了我的应用程序，但我无法弄清楚为什么它不起作用。

我有这段代码，它有三个元素.hamburger-small、.hamburger-big和.menu。

当你点击它时，它会调用这个函数：

hamburgerClick() {
    const small = document.querySelector('.hamburger-small');
    const big = document.querySelector('.hamburger-big');
    const menu = document.querySelector('.menu');
    small.classList.toggle('is-active');
    big.classList.toggle('is-active');
    menu.classList.toggle('show');
}

现在它在其他浏览器上都能正常工作，比如Chrome、Firefox、Safari和Edge，但在IE上不行。我看到了类似的问题，但似乎它应该能工作？当我第一次点击按钮时，控制台还会显示以下错误，但其他时间不会发生：

enter image description here

任何帮助都将是很好的..

编辑

我尝试使用@ViewChild()，但它仍然不起作用，不过“Invalid Calling Object”错误不再发生了。

@ViewChild('hamburgerBig') hamburgerBig: ElementRef;
@ViewChild('hamburgerSmall') hamburgerSmall: ElementRef;
@ViewChild('menu') menu: ElementRef;
hamburgerClick() {
    this.hamburgerBig.nativeElement.classList.toggle('is-active');
    this.hamburgerSmall.nativeElement.classList.toggle('is-active');
    this.menu.nativeElement.classList.toggle('show');
}

谢谢！！

0

2 答案

0 Comments

问题的原因是classList.toggle()方法在IE11中无效。解决方法是使用classList.add()和classList.remove()方法来代替classList.toggle()。

首先，在AppComponent组件类中，将toggle()方法修改如下：

toggle() {
  this.show = !this.show;
  // CHANGE THE NAME OF THE BUTTON.
  if(this.show)  
    this.buttonName = "Hide";
  else
    this.buttonName = "Show";
  // ADD OR REMOVE THE 'is-active' CLASS.
  const button = document.getElementById('bt');
  if(this.show)
    button.classList.add('is-active');
  else
    button.classList.remove('is-active');
}

然后，在app.component.css文件中添加以下样式：

.is-active {
  color: green;
}

最后，在HTML模板中的button元素上添加ngClass指令来绑定样式类：

<button (click)="toggle()" id="bt" [ngClass]="{'is-active': show}">
  {{ buttonName }}
</button>

通过以上修改，可以在IE11中正确地切换按钮的文本和样式类。

0
0 Comments

问题原因：classList.toggle()方法在IE11中不起作用。

解决方法：使用Renderer2来操纵DOM元素，以及使用ElementRef和ViewChild。首先导入ViewChild，ElementRef和Renderer2。然后，在DOM中使用模板引用获取元素。然后，在hamburgerClick函数中使用Renderer2来添加或删除类。

另外，还可以使用[ngClass]来实现相同的效果。只需在HTML中使用[ngClass]绑定类，然后使用一个函数来切换类的状态。

0