javascript - classList.toggle() 在 IE11 Angular 7 中無法使用（無效的調用對象）

我剛在 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');
}

謝謝!!

答案＃1

試著使用 Renderer2 來操作 DOM 元素，並搭配 ElementRef 和 ViewChild，如先前提到的其他方式一樣。

首先匯入 ViewChild, ElementRef 和 Renderer2

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

在你的 DOM 中建立模板引用後，使用 ViewChild 取得 ElementRef 類型的元素，像這樣

<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]（不確定你為什麼不使用這個代替）希望這對你有幫助

還要記得在你的建構函數中添加 render

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;
 }

給你

答案＃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>

此外，你可以根據你的需求嘗試修改程式碼。