Comment accéder à l'élément HTML à partir de l'intérieur de l'Angulaire de l'attribut de la directive?

L'angle de docs fournir un exemple de création d'un attribut de la directive qui modifie la couleur d'arrière-plan d'un élément:

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';
    }
}

Puis-je également utiliser el.nativeElement pour obtenir le contenu de l'élément (par exemple,Highlight me!), de modifier cela et mise à jour de l'élément?

Avez-vous essayé un console.log(el.nativeElement) et essayé d'inspecter cet objet?
oui, j'obtiens ceci: <h2 _ngcontent-cul-1="" typedeffect="">My Heroes</h2> mais je n'ai pas eu du tout de la joie dans l'accès au contenu
ne pas s'attendre à ce que, je suis désolé. j'ai posté une réponse, y compris ce "problème".

OriginalL'auteur Gareth Whittaker | 2016-06-23

  1. 22

    Donc en fait, mon commentaire que vous devriez faire un console.log(el.nativeElement) devrait avoir pointé dans la bonne direction, mais je n'ai pas s'attendre à la sortie d'une chaîne de caractères représentant la DOM Element.

    Ce que vous avez à faire pour l'inspecter dans la façon dont il vous aide à résoudre votre problème, c'est de faire un console.log(el) dans votre exemple, vous aurez accès à la nativeElement objet et va voir une propriété appelée innerHTML.

    Qui va conduire à la réponse à votre question de départ:

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

    Mise à jour pour une meilleure approche:

    Puisque c'est accepté de répondre à de web et les travailleurs sont de plus en plus important au jour le jour (et il est considéré comme la meilleure pratique de toute façon) je veux ajouter cette suggestion par Mark Rajcok ici.

    La meilleure façon de manipuler DOM Elements par programme est à l'aide de la Convertisseur:

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

    Modifier

    Depuis Renderer est obsolète maintenant, utilisez Renderer2 plutôt avec setProperty

    Mise à jour:

    Cette question avec sa réponse expliqué le console.log comportement.

    Ce qui signifie que console.dir(el.nativeElement) serait le plus direct d'accéder à la DOM Element comme un "possible" Objet dans votre console de cette situation.

    Espère que cela a aidé.

    Le moteur de rendu d'ajouter " mon nouveau contenu pour le contenu existant et de ne pas le remplacer.
    Si je ne me trompe pas, il serait probablement sage de prendre garde également que les vulnérabilités XSS pourrait être un sujet de préoccupation pour certains utilisateurs. Je pense que je vais combiner l'approche ci-dessus avec celui-ci comme bien stackoverflow.com/questions/34467000/sanitize-input-in-angular2
    Vous avez raison, mais la question n'est pas sur dynamiquement y compris le html ou le css, donc je ne vois pas pourquoi je devrais l'expliquer ici (le sujet est assez profond et comme vous l'avez dit vous allez trouver d'autres sources à ce sujet).
    Renderer2 ? L'enfer qui est le développement de ce cadre ? J'attendais plus de l'angulaire de l'équipe ...
    Cela a fonctionné comme un charme pour moi, merci @lexith

    OriginalL'auteur lexith

  2. 10

    Je suggère d'utiliser Rendre, comme le ElementRef doc API suggère:

    ... prendre un coup d'oeil au moteur de Rendu qui fournit une API qui peut en toute sécurité être utilisé même lorsque l'accès direct à l'élément natal n'est pas pris en charge.
    En s'appuyant sur direct DOM access crée couplage étroit entre votre application et le rendu des couches qui va la faire impossible de séparer les deux et déployer votre application web travailleur ou Universelle.

    Toujours utiliser le Convertisseur pour qu'il vous fera de code (ou de la bibliothèque vous à droite) être capable de travailler lors de l'utilisation Universelle ou les web workers.

    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');
    }
}

    Il ne ressemble pas Rendu a un getElementProperty() la méthode bien, alors je suppose que nous avons encore besoin d'utiliser NativeElement pour cette partie. Ou (mieux) réussir le contenu en tant qu'entrée de la propriété de la directive.

    OriginalL'auteur Mark Rajcok

  3. 5

    C'est parce que le contenu de

    <p myHighlight>Highlight me!</p>

    n'a pas été rendu lorsque le constructeur de la HighlightDirective est appelé ainsi, il n'y a pas de contenu encore.

    Si vous mettez en œuvre la AfterContentInit crochet, vous obtiendrez l'élément et son contenu.

    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
    }
}

    OriginalL'auteur JayChase