Angular 2 - 在点击时向DOM元素添加一个类

我试图添加一个类，它将改变它的外观（，例如汉堡到x），到一个菜单触发DOM元素，它有自己的方法来显示覆盖菜单，但我无法弄清楚如何做到这一点。Angular 2 - 在点击时向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'); 
    } 
}

我是新来的角2.这是如何工作了呢？我应该使用Renderer，为什么我应该使用Renderer？等问题

编辑：用绝对click事件（选择子，不是父）的问题是，我们必须使用一个reference tag与@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); 
    } 
}

来源

2017-03-15 snkv

https://angular.io/docs/ts/latest/guide/template -syntax.html＃！＃ngClass –

来完成你想要什么，你需要使用的渲染器（将其注入构造与private renderer: Renderer）。渲染器提供对本地元素的抽象，并提供了一种与DOM交互的安全方式。

在您的模板，你应该能够做这样的事情：

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

这捕获click事件，并把它传递给menuToggle功能。

然后在你的组件，你应该能够使用这样的渲染与DOM交互：

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

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

进一步的阅读在Renderer上，this is a good article on Medium。在谈到使用ViewChild和访问DOM通过nativeElement与使用Renderer，它说：

也能正常工作（使用nativeElement从ViewChild）。我们使用ViewChild装饰器帮助获取输入元素，然后访问本地DOM元素，并在输入上调用focus（）方法。

这种方法的问题是，当我们直接访问本地元素，我们在角的DOM抽象放弃和错过的机会，能够在无-DOM环境下也执行如：本地移动，原生桌面，网络工作者或服务器端渲染。

请记住， Angular是一个平台，浏览器只是我们的可以呈现我们的应用程序的一个选项。

希望这会有所帮助。

来源

2017-03-15 12:18:34

答案令人难以置信的精确度。我有一个小问题，虽然在标记' '这是被添加到内部子元素，而不是该类的直接所有者。我怎样才能解决这个问题？ – snkv

您可能需要检查以查看“目标”是什么。点击事件可能会从''转移到父''。在这种情况下，你可能需要使用类似'event.parent'的东西。我没有测试过。这只是一个猜测。您可以随时使用'console.log（event）'调试它并查看'event'上存在哪些选项。 –

0

在组件中创建一个支持字段，然后绑定到ngClass并使用打字表达式来有条件地将该类添加到该元素。请注意，应使用点击事件切换后台字段。例如。

在组件：openedBool: boolean = false;

而toggleOpenedBool() { openedBool = !openedBool; }

模板：<div (click)="toggleOpenedBool()" [ngClass]="{'opened': openedBool}"></div>

来源

2017-08-29 13:34:29 Vinorth

3

由于泰勒的回答，事情已经改变了一点。 Renderer已折旧并由Renderer2取代。在Renderer 2中，类setElementClass被替换为addClass。并根据docs为addClass新功能的签名，是

addClass(el: any, name: string): void

所以更新menuToggle功能应该读

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

来源

2017-12-17 05:54:02

Angular 2 - 在点击时向DOM元素添加一个类

回答

相关问题