时间戳

首页 > 解决方案 > classList.toggle() 不工作 IE11 Angular 7（无效的调用对象）

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

谢谢！！

标签： javascriptangulartypescriptinternet-explorer-11

解决方案

尝试使用Renderer2dom 元素以及前面提到的其他元素来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]（不知道你为什么不使用它）希望这会有所帮助

也不要忘记将渲染添加到您的构造函数

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

你去吧

推荐阅读