Question

我无法在组件中的元素上切换类。从检查器中，我可以看到该类已成功切换。但是，当单击#navbarToggle时，#navbarMenu内的所有内容都将被删除，并成为一个空列表。我可以在检查器中验证这一点，因为所有列表项都消失了。

我有一个导航栏组件，其中的html页面包括：

<nav>
    <span #navbarToggle>Toggle</span>

    <ul class="hidden" #navbarMenu>
        <li><a href="#">Home</a></li>
    </ul>
</nav>

然后用一个简单的声明进行scss：

.hidden {
    display: none;
}

在我的组件ts文件中：

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

@Component({

  selector: 'app-navbar',

  templateUrl: './navbar.component.html',

  styleUrls: ['./navbar.component.scss']

})

export class NavbarComponent implements AfterViewInit {

  @ViewChild('navbarMenu') navbarMenu: ElementRef;
  @ViewChild('navbarToggle') navbarToggle: ElementRef;

  constructor(private renderer: Renderer2) {
  }

  ngAfterViewInit() {

    this.renderer.listen(this.navbarToggle.nativeElement, 'click', () => {

      this.renderer.selectRootElement(this.navbarMenu.nativeElement).classList.toggle('hidden');

    });

  }

}

Answer 1

两件事：

1）在ul上启用切换侦听器的问题在于，如果只有1个li且将其切换开，则ul上将没有剩下任何东西点击。

2）最好使用Angular内置的结构指令，例如* ngIf或类绑定。

这是一个stackblitz类绑定示例（触发器不是ul）：https://stackblitz.com/edit/angular-8lihrj

在文档中，类绑定：https://angular.io/guide/template-syntax#class-binding

ngIf：https://angular.io/api/common/NgIf#syntax

切换类会导致元素的内部html消失

1 个答案: