Estoy tratando de agregar una clase que cambiará su apariencia ( por ejemplo, hamburguesa a x ), a un elemento DOM de activación de menú que tiene su propio método para mostrar un menú superpuesto, pero no puedo encontrar la manera de hacerlo.
Esto es lo que tengo hasta ahora: llama a un método externo para el menú en sí:
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'); } } Soy nuevo en Angular 2. ¿Cómo se supone que funciona esto? ¿Debo usar el Renderer , por qué debo usar el Renderer ? Y etc preguntas
EDITAR: El problema con el evento de clic absoluto (seleccionar el elemento secundario, no el principal) es que tenemos que usar una etiqueta de referencia emparejada con el decorador
@ViewChildde la siguiente manera:
@ViewChild('navTrigger') navTrigger: ElementRef; que se relaciona con la referencia #navTrigger en la plantilla HTML.
Por lo tanto:
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); } }Para lograr lo que desea, deberá usar Renderer (inyectándolo en el constructor con private renderer: Renderer ). Renderer proporciona una abstracción sobre los elementos nativos y proporciona una forma segura de interactuar con el DOM.
En su plantilla, debería poder hacer algo como esto:
<div (click)="menuToggle($event)"></div> Esto captura el evento de clic y lo pasa a la función menuToggle .
Luego, en su componente, debería poder interactuar con el DOM usando el Renderer de esta manera:
menuToggle(event:any) { this.renderer.setElementClass(event.target,"opened",true); } La firma de la función para setElementClass , de acuerdo con los documentos , es setElementClass(renderElement: any, className: string, isAdd: boolean) : void
Para leer más sobre Renderer, este es un buen artículo sobre Medium . Al hablar sobre el uso de ViewChild y el acceso al DOM a través de nativeElement en comparación con el uso de Renderer , dice:
Esto funciona bien (usando nativeElement de ViewChild). Tomamos el elemento de entrada con la ayuda del decorador ViewChild y luego accedemos al elemento DOM nativo y llamamos al método focus() en la entrada.
El problema con este enfoque es que cuando accedemos directamente al elemento nativo, renunciamos a la abstracción DOM de Angular y perdemos la oportunidad de poder ejecutar también en entornos sin DOM, como: móvil nativo, escritorio nativo, trabajador web. o representación del lado del servidor.
Recuerde que Angular es una plataforma, y el navegador es solo una opción de dónde podemos mostrar nuestra aplicación.
Espero que esto ayude.
Desde la respuesta de Tyler, las cosas han cambiado un poco. Renderer se deprecia y se reemplaza por Renderer2 . En Renderer 2 , la clase setElementClass se reemplaza por addClass . Y la nueva firma de función para addClass , según los documentos es
addClass(el: any, name: string): void Entonces, la función menuToggle actualizada debería leer
menuToggle(event:any) { this.renderer.addClass(event.target,"opened"); }Cree un campo de respaldo en el componente, luego vincúlelo a ngClass y use una expresión mecanografiada para agregar condicionalmente la clase al elemento. Tenga en cuenta que se debe usar un evento de clic para alternar el campo de respaldo. p.ej.
openedBool: boolean = false;toggleOpenedBool() { openedBool = !openedBool; }<div (click)="toggleOpenedBool()" [ngClass]="{'opened': openedBool}"></div>