Estoy tratando de crear una directiva que acepte como entrada una propiedad de icon que sería el nombre del icono. Entonces, la directiva internamente intentaría encontrar un elemento de span donde aplicaría una clase. Me pregunto si esto es posible desde dentro de la directiva aplicada al padre. ¿O tengo que crear una directiva para el niño también?
Aquí está mi código HTML:
<div sfw-navbar-square sfw-navbar-icon> <span class="mdi mdi-magnify"></span> </div>Aquí está la directiva en sí:
import { Directive, ElementRef, Renderer } from '@angular/core'; @Directive({ selector: '[sfw-navbar-square]' }) export class NavbarSquareDirective { // Here I'd like to define a input prop that takes a string constructor(private el: ElementRef, private renderer: Renderer) { this.renderer.setElementClass(this.el.nativeElement, 'navbar-square-item', true); this.renderer.setElementClass(this.el.nativeElement, 'pointer', true); this.renderer.setElementClass(this.el.nativeElement, 'met-blue-hover', true); // Here I'd like to pass that string as a class for the span child element. Can I have access to it from here? } }Puede usar una entrada como lo haría normalmente. La manipulación de DOM normalmente se realizaría en ngAfterViewInit cuando se inicializan todas las vistas, pero probablemente también funcionará en ngOnInit ya que la propiedad del icono se establecerá y no tendrá ningún ViewChildren al que intente acceder.
HTML:
<div sfw-navbar-square [sfwNavbarIcon]="'my-icon'"> <span class="mdi mdi-magnify"></span> </div>Aquí está la directiva en sí (Angular 4):
import { Directive, ElementRef, Renderer2 } from '@angular/core'; @Directive({ selector: '[sfw-navbar-square]' }) export class NavbarSquareDirective { @Input('sfwNavbarIcon') icon:string; constructor(private el: ElementRef, private renderer: Renderer2) { this.renderer.addClass(this.el.nativeElement, 'navbar-square-item'); this.renderer.addClass(this.el.nativeElement, 'pointer'); this.renderer.addClass(this.el.nativeElement, 'met-blue-hover'); } ngAfterViewInit() { let span = this.el.nativeElement.querySelector('span'); this.renderer.addClass(span, this.icon); } } @Directive({ selector: '[sfw-navbar-square]' }) export class NavbarSquareDirective { // Here I'd like to define a input prop that takes a string constructor(private el: ElementRef, private renderer: Renderer) { this.renderer.setElementClass(this.el.nativeElement, 'navbar-square-item', true); this.renderer.setElementClass(this.el.nativeElement, 'pointer', true); this.renderer.setElementClass(this.el.nativeElement, 'met-blue-hover', true); let firstChild = this.el.nativeElement.childNodes[0]; firstChild.className = ''; } } <div sfw-navbar-square prop="some string" sfw-navbar-icon> <span class="mdi mdi-magnify"></span> </div>