angular - 单击时将类添加到 DOM 元素

Question

我正在尝试将一个会更改其外观的类(例如 burger to x)添加到菜单触发器 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');
    }
}

我是 Angular 2 的新手。这应该如何解决？我应该使用 Renderer 吗，为什么我应该使用 Renderer？等等问题

---

EDIT: The issue with the absolute click event (selecting the child, not the parent) is that we have to use a reference tag paired with the @ViewChild decorator as so:

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

Answer 1

要完成您想要的，您需要使用渲染器(使用 private renderer: Renderer 将其注入(inject)构造函数)。渲染器提供了对原生元素的抽象，并提供了一种与 DOM 交互的安全方式。

在您的模板中，您应该能够执行如下操作:

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

这会捕获点击事件并将其传递给 menuToggle 函数。

然后在您的组件中，您应该能够像这样使用渲染器与 DOM 交互:

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

setElementClass 的函数签名，根据 docs是 setElementClass(renderElement: any, className: string, isAdd: boolean) : void

要进一步阅读渲染器，this is a good article on Medium .在谈论使用 ViewChild 并通过 nativeElement 访问 DOM 与使用 Renderer 相比时，它说:

This works fine(using nativeElement from a ViewChild). We are grabbing the input element with the help of the ViewChild decorator and then access the native DOM element and call the focus() method on the input.

The problem with this approach is that when we access the native element directly we are giving up on Angular’s DOM abstraction and miss out on the opportunity to be able to execute also in none-DOM environments such as: native mobile, native desktop, web worker or server side rendering.

Remember that Angular is a platform, and the browser is just one option for where we can render our app.

希望这对您有所帮助。