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元素添加一個類

回答

相關問題