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

Question

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

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

<div [class.shown]="!chatbarFullscreen">
        <div [class.disabled]="router.url.includes('home')">
            <img (click)="closeChatbar(true, router.url.includes('home') ? true : false)" *ngIf="chatbarFullscreen" src="../assets/images/whole-app/arrow-right.svg" alt="Arrow Right">
            <img (click)="closeChatbar(false, router.url.includes('home') ? true : false)" *ngIf="!chatbarFullscreen" src="../assets/images/whole-app/arrow-left.svg" alt="Arrow Left">
        </div>
        <img (click)="goHome()" src="../assets/images/chatbar/header-logo.svg" alt="header logo">
        <div id="small" (click)="hamburgerClick()" class="hamburger hamburger--slider hamburger-small">
            <div class="hamburger-box">
              <div class="hamburger-inner"></div>
            </div>
        </div>
    </div>
    <div id="big" (click)="hamburgerClick()" class="hamburger hamburger--slider hamburger-big">
        <div class="hamburger-box">
          <div class="hamburger-inner"></div>
        </div>
    </div>
    <div class="menu">
        <p (click)="closeChatbar(false); hamburgerClick();" [routerLink]="['/app/main/home']">Home</p>
    </div>
</div>

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

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

现在它适用于所有其他浏览器，Chrome、Firefox、Safari 和 Edge，但不适用于 IE 我见过类似的问题，但它似乎应该可以工作？当我第一次单击该按钮时，我也在控制台中收到此错误，但其他任何时候都不会发生此错误

任何帮助都会很棒..

编辑

我已尝试使用@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');
}

谢谢！！

Answer 1

尝试使用 Renderer2 以及前面提到的 ElementRef 和 ViewChild 来操作 dom 元素。

首先导入ViewChild, ElementRef 和Renderer2

import { Renderer2, ElementRef, ViewChild } from '@angular/core';

在 DOM 中创建模板引用后，使用 ElementRef 类型的 ViewChild 获取元素，例如

<div #hamburgerBig></div>
<div #hamburgerSmall></div>
<div #menu></div>

@ViewChild('hamburgerBig') hamburgerBig: ElementRef;
@ViewChild('hamburgerSmall') hamburgerSmall: ElementRef;
@ViewChild('menu') menu: ElementRef;

用 hamburgerClick 功能做你的事

hamburgerClick() {
    const hamBigIsActive = this.hamburgerBig.nativeElement.classList.contains('is-active');
    const hamSmallIsActive = this.hamburgerSmall.nativeElement.classList.contains('is-active');
    const menuShow = this.menu.nativeElement.classList.contains('show');

    if(hamBigIsActive) {
     this.renderer.removeClass(this.hamburgerBig.nativeElement, 'is-active');
    } else {
      this.renderer.addClass(this.hamburgerBig.nativeElement, 'is-active');
    }
    if(hamSmallIsActive) {
     this.renderer.removeClass(this.hamburgerSmall.nativeElement, 'is-active');
    } else {
      this.renderer.addClass(this.hamburgerSmall.nativeElement, 'is-active');
    }
    if(hamSmallIsActive) {
      this.renderer.removeClass(this.menu.nativeElement, 'show');
    } else {
      this.renderer.addClass(this.menu.nativeElement, 'show');
    }
}

或者你可以简单地使用[ngClass]（不知道你为什么不使用它） 希望这会有所帮助

别忘了给你的constructor添加渲染

contructor(private renderer: Renderer2){}

编辑：这是[ngClass] 实现

<div id="small" 
(click)="hamburgerClick()"
[ngClass] = "{'is-active' : hamClick}"
class="hamburger hamburger-- 
slider hamburger-small">
        <div class="hamburger-box">
          <div class="hamburger-inner"></div>
        </div>
</div>
<div id="big" 
(click)="hamburgerClick()"
[ngClass] = "{'is-active' : hamClick}"
class="hamburger hamburger--slider 
 hamburger-big">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
</div>
<div 
[ngClass] = "{'show' : hamClick}"
class="menu">
    <p (click)="closeChatbar(false); hamburgerClick();" [routerLink]=" 
    ['/app/main/home']">Home</p>
</div>

然后就用一个函数来切换

 hamClick: boolean

 hamburgerClick(){
   this.hamClick = !this.hamClick;
 }

你来了

Answer 2

尝试使用以下代码进行测试可能会帮助您解决问题。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public show:boolean = false;
  public buttonName:any = 'Show';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show)  
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }
}

.is-active{color:green;
}

<button (click)="toggle()" id="bt">
    Hide
</button>

<ng-container *ngIf="show">
    <div style="margin: 0 auto;text-align: left;">
        <div>
            <label>Name:</label>
            <div><input id="tbname" name="yourname" /></div>
        </div>
        <div>
            <label>Email Address:</label>
            <div><input name="email" id="email" /></div></div>
        <div>
            <label>Additional Information (optional):</label>
            <div><textarea rows="5" cols="46"></textarea></div>
        </div>
    </div>
</ng-container>

此外，您可以尝试根据您的要求修改代码。