Angular 角度-单击时将类添加到DOM元素

我试图将一个类添加到一个菜单触发器DOM元素中，该元素有自己的方法来显示覆盖菜单，但我不知道如何做

以下是我到目前为止所做的-这是为菜单本身调用外部方法：

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

import { LayoutService } from 'app/core/services/layout.service';

@Component({
    moduleId: module.id,
    selector: 'header-main',
    templateUrl: 'header-main.component.html',
})


export class HeaderMainComponent {

    @ViewChild('nav-trigger') el: ElementRef;

    constructor(private layoutService: LayoutService) { }

    menuToggle() {
        this.layoutService.mainMenuToggle();
        this.el.nativeElement.classList.add('opened');
    }
}

我是新来的。这是怎么回事？我应该使用

渲染器

，为什么我应该使用

渲染器

？等等问题

---

编辑：绝对点击事件（选择子对象，而不是父对象）的问题是，我们必须使用与

@ViewChild

装饰器配对的：

@ViewChild（'navTrigger'）navTrigger:ElementRef

与HTML模板中的

#navTrigger

引用相关

因此：

export class HeaderMainComponent {
    logoAlt = 'We Craft beautiful websites'; // Logo alt and title texts

    @ViewChild('navTrigger') navTrigger: ElementRef;

    constructor(private layoutService: LayoutService, private renderer: Renderer) { }

    menuToggle(event: any) {
        this.layoutService.mainMenuToggle();
        this.renderer.setElementClass(this.navTrigger.nativeElement, 'opened', true);
    }
}

---

要实现所需的功能，需要使用渲染器（使用

private Renderer:Renderer

将其注入构造函数）。渲染器提供了对本机元素的抽象，并提供了与DOM交互的安全方式

在模板中，您应该能够执行以下操作：

<div (click)="menuToggle($event)"></div>

menuToggle(event:any) {
    this.renderer.setElementClass(event.target,"opened",true);
}

setElementClass

的函数签名，根据is

setElementClass（renderElement:any，className:string，isAdd:boolean）：void

有关渲染器的进一步阅读。在谈到使用

ViewChild

和通过

nativeElement

访问DOM时，与使用

渲染器相比，它说：

这很好（使用ViewChild中的nativeElement）。我们在的帮助下获取输入元素
然后访问本机DOM元素和
对输入调用focus（）方法

这种方法的问题是什么
当我们直接访问本机元素时，我们就放弃了
Angular的DOM抽象，错过了
也可以在非DOM环境中执行，例如：本机移动、，
本机桌面、web worker或服务器端呈现

记得吗
Angular是一个平台，而浏览器只是其中一个选项
可以呈现我们的应用程序

希望这有帮助。
在组件中创建一个支持字段，然后绑定到ngClass，并使用typescript表达式有条件地将类添加到元素中。注意：应使用单击事件切换支持字段。例如

在组件中：
openedBool:boolean=false

和
toggleOpenedBool（）{openedBool=！openedBool；}
在模板中：

自从泰勒的回答之后，情况发生了一些变化<代码>渲染器

被折旧并替换为

渲染器2

。在渲染器2中，类

setElementClass

被

addClass

替换。根据is，新的函数签名用于

addClass

因此，更新后的

菜单切换

函数应为

menuToggle(event:any) {
    this.renderer.addClass(event.target,"opened");
}

---

答案的精确性令人难以置信。但是我对此有一个小问题，在标记

中，它被添加到内部子元素，而不是类的直接所有者。如何解决此问题？您可能需要检查目标是什么。单击事件可能正从

传输到父级

。在这种情况下，您可能需要使用类似于

event.parent的内容。我还没有测试过。这只是猜测。通过使用
console.log（event）
，您始终可以调试它并查看
event
上存在哪些选项。
menuToggle(event:any) {
    this.renderer.addClass(event.target,"opened");
}