classList.toggle () не работает IE11 Angular 7 (Invalid Calling Object)

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 для управления элементами dom вместе с ElementRef и ViewChild, как уже упоминалось ранее.

первый импорт ViewChild, ElementRef и Renderer2

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

получите Элемент, используя ViewChild типа ElementRef после того, как вы сделаете ссылки на шаблоны в вашей DOM, например,

<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] (не уверен, почему вы не используете это вместо этого), надеюсь, это поможет

, также не забудьте добавить рендер в ваш конструктор

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>

Далее, вы можете попробовать изменить код в соответствии с вашими требованиями.