directives - directive angular 6 example

¿Cómo accedes al elemento HTML desde una directiva de atributo Angular?

Question

Los documentos angulares proporcionan un ejemplo para crear una directiva de atributos que cambia el color de fondo de un elemento:

https://angular.io/docs/ts/latest/guide/attribute-directives.html

<p myHighlight>Highlight me!</p>

import { Directive, ElementRef } from ''@angular/core'';

@Directive({ selector: ''[myHighlight]'' })

export class HighlightDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = ''yellow'';
    }
}

¿También puedo usar el.nativeElement para obtener el contenido del elemento (por ejemplo, el.nativeElement ), modificar esto y actualizar el elemento?

Answer 1

Entonces, en realidad, mi comentario de que deberías hacer una console.log(el.nativeElement) debería console.log(el.nativeElement) dirigido en la dirección correcta, pero no esperaba que la salida fuera solo una cadena que representara el DOM Element .

Lo que debe hacer para inspeccionarlo de la forma en que lo ayuda con su problema, es hacer un console.log(el) en su ejemplo, luego tendrá acceso al objeto nativeElement y verá una propiedad llamada innerHTML .

Lo que llevará a la respuesta a su pregunta original:

let myCurrentContent:string = el.nativeElement.innerHTML; // get the content of your element
el.nativeElement.innerHTML = ''my new content''; // set content of your element

Actualización para un mejor enfoque:

Ya que es la respuesta aceptada y los trabajadores web se están volviendo más importantes día a día (y se considera la mejor práctica de todos modos) Quiero agregar esta sugerencia de Mark Rajcok aquí.

La mejor manera de manipular DOM Elements programáticamente es usar el Renderer :

constructor(private _elemRef: ElementRef, private _renderer: Renderer) { 
    this._renderer.setElementProperty(this._elemRef.nativeElement, ''innerHTML'', ''my new content'');
}

Editar

Dado que el Renderer está en desuso ahora, use Renderer2 lugar con setProperty

Actualizar:

Esta pregunta con su respuesta explica el comportamiento de console.log .

Lo que significa que console.dir(el.nativeElement) sería la forma más directa de acceder al DOM Element como un objeto "inspeccionable" en su consola para esta situación.

Espero que esto haya ayudado.

Answer 2

Esto se debe a que el contenido de

<p myHighlight>Highlight me!</p>

no se ha procesado cuando se llama al constructor de HighlightDirective, por lo que todavía no hay contenido.

Si implementa el gancho AfterContentInit obtendrá el elemento y su contenido.

import { Directive, ElementRef, AfterContentInit } from ''@angular/core'';

@Directive({ selector: ''[myHighlight]'' })

export class HighlightDirective {

    constructor(private el: ElementRef) {
        //el.nativeElement.style.backgroundColor = ''yellow'';
    }

    ngAfterContentInit(){
        //you can get to the element content here 
        //this.el.nativeElement
    }
}

Answer 3

Sugiero usar Render , como sugiere la documentación de la API de ElementRef :

... eche un vistazo a Renderer, que proporciona una API que puede usarse de manera segura incluso cuando no se admite el acceso directo a elementos nativos. Confiar en el acceso directo a DOM crea un acoplamiento estrecho entre su aplicación y las capas de representación, lo que hará que sea imposible separarlas e implementar su aplicación en un trabajador web o Universal .

Siempre use el Renderer, ya que hará que su código (o la biblioteca que le corresponde) pueda funcionar cuando se usa Universal o WebWorkers.

import { Directive, ElementRef, HostListener, Input, Renderer } from ''@angular/core'';

export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer) {
        renderer.setElementProperty(el.nativeElement, ''innerHTML'', ''some new value'');
    }
}

No parece que Render tenga un método getElementProperty (), así que supongo que todavía necesitamos usar NativeElement para esa parte. O (mejor) pasar el contenido como una propiedad de entrada a la directiva.